IPad 浏览器宽高标准

有没有人知道在 iPad 上浏览任何网页时，身体最安全的宽度和高度？我想尽量避免使用滚动条。

谢谢。

Erik

253615 次浏览
小开

这个问题没有简单的答案。苹果公司的移动版 WebKit，用于 iPhone、 iPod Touch 和 iPad，将缩放页面以适应屏幕，此时用户可以自由放大和缩小。

也就是说，您可以将页面设计为最小化所需的缩放量。你最好的选择是让宽度和高度与 iPad 的低分辨率相同，因为你不知道它是朝向哪个方向的; 换句话说，你可以把你的页面设置为768x768，这样无论是朝向1024x768还是768x1024，它都能很好地适应 iPad 的屏幕。

更重要的是，你想要设计一个大的控件，有很多空间，很容易用你的拇指点击-你可以很容易地设计一个768x768页面，非常杂乱，因此需要大量的缩放。为了实现这一点，您可能需要将控件划分到多个网页中。

另一方面，这不是最有价值的追求。如果你在设计页面的时候发现有机会让你的页面更加“手指友好”，那么就去做吧... ... 但事实是，iPad 用户非常喜欢移动页面，放大和缩小页面，因为在大多数网站上这是必要的。如果有的话，您可能希望将其设计成有利于这种类型的导航。

使相关的分组数据框，可以很容易地双击重点，并保持相关的控件接近对方。IPad 用户最喜欢的是一个能够方便他们熟悉的缩放和平移导航的页面，而不是一个控制较少的页面，这样他们就不需要这么做了。

小开
最佳答案

如果指定，页面的像素宽度和高度将取决于方向以及元视图标记。下面是运行 jquery 的 $(窗口)的结果。Width ()和 $(window)。高度()。

When page has no meta viewport tag:

  • 肖像: 980x1208
  • 景观: 980x661

当 page 具有以下两个 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
  • Landscape: 768x518

<meta name="viewport" content="height=device-height">:

  • Portrait: 980x1024
  • 景观: 980x1024

<meta name="viewport" content="height=device-height,width=device-width">:

  • Portrait: 768x1024
  • 景观: 768x1024

用 <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width,height=device-height">

  • 肖像: 768x1024
  • 景观: 1024x1024

With <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,height=device-height">

  • 肖像: 831x1024
  • 景观: 1520x1024
小开

你可以试试这个:

    /*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{


}
}

提交答案