什么是iPhone屏幕分辨率?
我知道这已被问到,但我仍然感到困惑。什么是iPhone屏幕分辨率?
我想为iPhone构建一个简单的页面:徽标在顶部,电话号码,地址以及占用整个屏幕(无重复)的BG。
当我运行一个脚本打印screenwidth和screenheight我得到:320px * 480px。
但是,当我创建这些确切尺寸的div时,它很小。是什么赋予了?应该是检测到的分辨率的整个尺寸的框不占据整个屏幕?因此,如果我为iPhone设计一个页面,并且我希望它在Safari(iPhone上)占据整个屏幕,那么我应该设计什么样的分辨率?
我正在使用运行iOS 4.0的iPhone 3G作为我的测试设备。
感谢您的任何帮助。
您需要视口元标记来告诉iPhone您的网站是专门为它设计的。
使用此:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
您可以更改缩放选项,如果你需要用户放大等。
此外,如果你希望你的应用在横向模式下工作,以及,你可以将宽度设置为100%。
#wrapper {
width: 100%
max-width: 480px;
}
Oiy。感谢Marko。这对我来说是新的,我想我可能会失去理智。 – AJB 2010-07-13 20:09:35
这取决于哪个iPhone。原来的3G和3GS是320x480,4.0是640x960的两倍。如果您设计的分辨率较高,那么较旧的手机会将其缩小50%,应该看起来不错。
您可能还想了解如何使用媒体查询来优化iPhone体验。关于this blog post的更多内容。
感谢技术规格Tim。 – AJB 2010-07-13 20:10:29
问题是iPhone试图自行调整它。如果你把这个标签放在页面的头部,它会告诉手机“别担心,我会自己处理内容的大小”,并强制屏幕以1:1的比例。
<meta name = "viewport" content="inital-scale=1.0">
感谢Mike的帮助。 – AJB 2010-07-13 20:11:08
其他答案是正确的,你需要配置视口。
这个苹果官方文档是在这里:
值得通过whole document略读 - 以及一个很多视标签的描述,它(配有图片!)也有很多其他有用的建议,将网页定位到iphone。
王牌,感谢约瑟夫,看起来正是我需要的东西。那么,当我读它时,还有一壶咖啡。 – AJB 2010-07-13 20:13:22
你可能想使用所有这些
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<!-- this one tells Mobile Safari to hide the Address Bar and make the app fullscreen -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
在MonoTouch中,尝试
var yourFrame = FrameForOrientation(CurrentInterfaceOrientation);
这些方法
public static UIInterfaceOrientation CurrentInterfaceOrientation {
get {
return UIApplication.SharedApplication.StatusBarOrientation;
}
}
public static RectangleF FrameForOrientation(UIInterfaceOrientation orientation, bool subtractStatusBarHeight = true) {
var screen = UIScreen.MainScreen;
var fullScreenRect = screen.Bounds; // always implicitly in Portrait orientation.
var appFrame = screen.ApplicationFrame;
// Initially assume portrait orientation.
var width = fullScreenRect.Width;
var height = fullScreenRect.Height;
// Correct for orientation.
if (IsLandscapeOrientation(orientation)) {
width = fullScreenRect.Height;
height = fullScreenRect.Width;
}
var startHeight = 0.0f;
if (subtractStatusBarHeight) {
// Find status bar height by checking which dimension of the applicationFrame is narrower than screen bounds.
// Little bit ugly looking, but it'll still work even if they change the status bar height in future.
var statusBarHeight = Math.Max((fullScreenRect.Width - appFrame.Width), (fullScreenRect.Height- appFrame.Height));
// Account for status bar, which always subtracts from the height (since it's always at the top of the screen).
height -= statusBarHeight;
startHeight = statusBarHeight;
}
return new RectangleF(0, startHeight, width, height);
}
public static bool IsLandscapeOrientation(UIInterfaceOrientation orientation) {
return
orientation == UIInterfaceOrientation.LandscapeLeft ||
orientation == UIInterfaceOrientation.LandscapeRight;
}
你可能想全屏选项,以及设置初始尺寸 – 2010-07-13 19:56:12