javascript - 为 iPad 设计网站

Question

我需要一些关于如何为 Apple iPad 设计网站的建议。

首先是事实，以及我的计划： 事实： - iPad 有 1024x768 屏幕 - 可视区域（折叠）是纵向 916 和陆地 660。我不确定这些信息，因为有很多页面包含不同的信息。（在某处也读到 952，所以如果您有 Ipad，请使用标准 SAFARI 设置确认正确的数字）

我的计划：

我的设计计划是一个很长的一页网站。例如 - 一个五个菜单页面（这意味着我在另一个下面有 5 个 div） - 每个菜单都是一个电影库 - 访问者总是看到一个菜单，所以一个电影库

我的问题：

• iPad 上哪个尺寸正确？
• 如何使我的 DIV 尺寸（高度）始终适合屏幕？如果这是可能的，那么： - 导致在 PC 上查看有什么问题吗？（所以只有当浏览器代理是 iPad 时我才需要使用此设置？）

谢谢你的任何建议。

Answer 1

如果您无法使用 iPad 进行测试，那么您最好看看模拟器。类似于：http : //ipad-emulator.org/

请记住，尽管 Safari 并不是唯一可用于 iPad 的浏览器，因此您基于此做出的任何大小估计可能不适用于其他浏览器。

否则，谷歌是你的朋友： 如何让你的网站适合 Apple iPad

Answer 2

如果您试图让网站在桌面浏览器和 iPad 上都可以访问，我建议您使用 CSS 媒体查询来构建您的网站。它允许您根据浏览器大小更改站点。

http://www.w3.org/TR/css3-mediaqueries/

语法很简单，举个例子：

@media screen and (max-width:443px) and (min-width:250px){
    .class{}
    #id{}
}

它的工作方式是当屏幕在 250px 和 443px 之间时，它会应用其中的样式。只要您将媒体查询保留在 CSS 文档的底部，您就会覆盖其他属性。这样做的好处是您可以通过调整浏览器窗口的大小来测试它。