html - iPad 上基于百分比的 CSS 布局中断

标签 html ios css ipad viewport

我正在尝试根据客户的规范对网站进行编码。我现在所拥有的似乎可以在 OSX Safari、Firefox 和 Chrome 上完美运行。未在 PC 上测试。在 iPad 上很快就崩溃了。并且完全厌倦了 iPhone。

这是我现在所在的位置:http://geofkern.com/14v0.1/jewelrySeries.html

每个元素的大小都根据窗口的高度进行百分比调整,因为客户习惯于 flash 站点缩放到窗口大小,并希望他的图像显示得尽可能大。在 iPad 上,如果我以横向模式打开页面,并立即单击菜单按钮,弹出菜单,所有内容都以适当的大小显示。但是,一旦我滚动、重新加载或尝试以纵向查看,菜单按钮就会停止工作,或者没有任何内容以正确的尺寸显示(如果它仍然可见的话)。我试过更改视口(viewport)元设置,但似乎没有任何组合起作用。我想让它保持可扩展性,但基于百分比的尺寸在 1.0 以外的任何比例下似乎都不稳定。

我在这里明显遗漏了什么吗?有没有更好的方法来做到这一点? 有谁知道为什么我的页面在移动设备上显示如此不稳定?

最佳答案

所以看起来最大的问题是 iOS 尚不支持视口(viewport)相对单位。将它们全部改回 % 单位,我的大部分问题都已解决。仍然不像在桌面上那样表现,但至少它不再“完全无聊”。

关于html - iPad 上基于百分比的 CSS 布局中断,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25574404/

相关文章:

html - 无法让 flexbox 在中心垂直对齐我的内容

html - 通过 CSS 响应式设置 div 的高度

html - 如何将列表项定位到其父级无序列表/div 的右侧?

html - 悬停时显示图像的CSS代码

javascript - 单击按钮时如何让用户下载多个文件?

javascript - OOP访问html5视频变量

ios - F# 事件处理程序实现

ios - 跨 ViewController 设置和访问全局属性的正确方法是什么?

iphone - 在不重新加载整个 tableView 的情况下在 tableView 中实现 "More"按钮

jquery - 直接在 CSS 文件中更改 CSS 规则