回答
像素宽度和你的页面的高度将取决于取向以及元视口代码,如果指定。以下是在iPad 1浏览器上运行jquery的$(window).width()和$(window).height()的结果。
当页面有没有元视口代码:
- 肖像:980x1208
- 景观:980x661
当页面有这两种meta标签:
<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">
<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1">
- 肖像:768x946
- 景观:1024x690
随着<meta name="viewport" content="width=device-width">
:
- 肖像:768x946
- 景观:768x518
随着<meta name="viewport" content="height=device-height">
:
- 肖像:980x1024
- 景观:980x1024
随着<meta name="viewport" content="height=device-height,width=device-width">
:
- 肖像:768×1024
- 景观:768×1024
随着<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width,height=device-height">
- 肖像:768×1024
- 景观:1024×1024
随着<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,height=device-height">
- 肖像:831x1024
- 景观:1520x1024
这些是否适用于运行ios 5.x的ipad 2? ipad 1运行的ios 4.x在地址栏下没有标签栏。 – Ericson578 2012-03-09 19:20:43
甜蜜单子!谢谢。 – uday 2012-03-29 21:18:41
Ericson578:这些都是ipad 1. – 2012-04-30 21:39:37
有没有简单的回答这个问题。用于iPhone,iPod Touch和iPad的Apple的移动版WebKit将缩放页面以适应屏幕,此时用户可以自由放大和缩小。
这就是说,你可以设计自己的网页,以尽量减少缩放必要的量。你最好的选择是使宽度和高度与iPad的较低分辨率相同,因为你不知道它面向哪个方向;换句话说,你可以制作你的页面768x768,这样它就可以很好地适应iPad的屏幕,不管它是面向1024x768还是768x1024。
更重要的是,您希望设计带有大量控件的大控件页面,这些控件很容易用拇指击中 - 您可以轻松设计一个非常混乱,因此需要大量缩放的768x768页面。要做到这一点,您可能希望将您的控件划分为多个网页。
在另一方面,这不是最值得追求。如果在设计你发现机会,使你的页面更加“手指友好的”,然后去了......但现实情况是,iPad用户非常舒适的移动和放大和缩小页面去的事情,因为这在大多数网站上都是必需的。如果有的话,你可能想要设计它,这有利于这种类型的导航。
请有关分组数据的箱子,可以很容易地双点的重点,并保持相互靠近相关的控件。 iPad用户很可能会喜欢这样一个页面,该页面有助于他们熟悉的熟悉的缩放和平移导航,而不仅仅是控制较少的页面,因此他们不必这样做。
我非常感谢你的回复。我同意。我还买不起iPad。我觉得大多数人会以纵向而不是横向来看待网页。我知道我会的。 并感谢您的手指提醒。非常真实! 谢谢。 Erik – Erik 2010-07-30 22:33:05
有用的链接:http://x7.fi/2010/02/12/how-to-fit-your-website-for-the-apple-ipad/ – 2011-09-07 07:22:11
768x1024不考虑大小urlbar和选项卡,它取决于ipad(1或2,以及ios 4和5之间) – Ericson578 2012-03-09 19:17:12
你可以试试这个:
/*iPad landscape oriented styles */
@media only screen and (device-width:768px)and (orientation:landscape){
.yourstyle{
}
}
/*iPad Portrait oriented styles */
@media only screen and (device-width:768px)and (orientation:portrait){
.yourstyle{
}
}
- 1. 浏览器宽度和高度
- 2. 浏览器大小(宽度和高度)
- 3. 浏览器宽度的100%宽度div
- 4. 跨浏览器输入按钮的高度和宽度
- 5. 获取可用的浏览器宽度和高度
- 6. 浏览器忽略css的高度和宽度
- 7. 使网站符合浏览器的宽度和高度
- 8. 浏览器窗口高度和宽度的大小div
- 9. 如何用CSS调整100%的浏览器高度和宽度?
- 10. 视频循环100%浏览器的高度和宽度
- 11. 浏览器支持getBoundingClientRect的宽度和高度属性?
- 12. JS检测浏览器的宽度和高度在Chrome浏览器和Safari浏览器,但不是IE9或FF9
- 13. jQuery浏览器高度不准确
- 14. JavaFX获取浏览器宽度和高度
- 15. 动态设置浏览器高度和宽度
- 16. 在虚拟浏览器中获取页面宽度和高度
- 17. jquery mobile:为桌面浏览器设置宽度和高度
- 18. 如何为浏览器窗口宽度和高度设置宽度和高度变量?
- 19. 更改浏览器宽度的li高度调整大小
- 20. 谷歌浏览器中的最大宽度与最大高度
- 21. IFrame根据浏览器的“高度”“宽度”进行调整
- 22. 响应式Div高度可以扩展浏览器的宽度
- 23. 集图片浏览的高度和宽度在网格视图
- 24. 我如何设置浏览弹窗的宽度和高度?
- 25. 在IE浏览器的宽度与IE浏览器不同的宽度div
- 26. 浏览器窗口和div的高度
- 27. 网站标题浏览器宽度
- 28. 如何使PIXI渲染器适合浏览器的宽度和高度?
- 29. 获取浏览器的宽度和高度追加的div jQuery的
- 30. 您如何确定webkit Chrome和Safari浏览器的图片高度和宽度?
这里是一个基于浏览器的模拟器,你可以用它来测试iPad的景观模式[http://alexw.me/ipad2的一个链接/#!safari](http://alexw.me/ipad2/#!safari) – 2013-03-31 16:12:10