iPad 的简单 HTML 布局

Posted 2023-03-12

【中文标题】iPad 的简单 HTML 布局

【英文标题】：Simple HTML layout for iPad

【发布时间】：2014-11-24 11:18:44

【问题描述】：

我正在尝试准备一个适用于所有设备的简单布局设计。我目前在使用 iPad 时遇到问题。整个网页不应该是可滚动的，但 iPad 会尝试强制并在其边界之外滚动网站（我认为它称为覆盖滚动，这会给您带来更流畅的感觉）。如果覆盖滚动仍然存在，我真的没有问题，但主要问题是：

当我打开网页并尝试滚动可垂直滚动的内容（左白内容或右红内容）时，整个网页滚动而不是 div 本身。

如果我尝试滑动滚动内容，有时它会起作用，有时整个网页会再次滚动。这是完全不可预测的。有人可以帮我做一个笨拙的例子吗？

我认为有必要为移动设备制作一个单独的 css 文件。当然，我们首先使用的是引导程序。

【问题讨论】：

使用引导程序进行响应式设计。您只需要引导 CSS 文件（如果需要，您还可以自己覆盖这些样式）。 getbootstrap.com

嘿，我们当然在使用引导程序。问题仍然在于 iPad 上的滚动内容。

【参考方案1】：

您必须对特定设备使用媒体查询，这是针对 ipad 的横向或纵向模式..尝试一次..您可以在同一个 css 文件以及不同文件中尝试此操作

    @media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)   /* STYLES GO HERE */

iPad 横屏

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)  /* STYLES GO HERE */