iphone - 如何为响应式设计检测屏幕高度

标签 iphone css responsive-design

我正在为响应式设计构建一个网站。

我有一定的CSS样式如下:

/* when viewport height less than 320px */
@media screen and (max-height: 319px) { /* TRIED FOR IPHONE -- CAN'T GET TO WORK YET */

    #footer {
        font-size: 65%;
        line-height: 110%;
        margin-top: 12px;
    }

}

我在我的 iPhone 横向模式下测试它,字体大小没有更改为 65%,这 3 种样式中的任何一种都不生效。这是检测 iPhone 屏幕高度尺寸的有效且正确的方法吗?

最佳答案

您可以尝试使用不同的媒体查询吗?

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

@media
    only screen and (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5) {
}

我从来没有遇到过媒体查询的问题。在纵向和横向模式下通过在线 iPhone 模拟器测试您的网站后,字体大小设置为 65%:

http://www.testiphone.com/

但是,如果上面的媒体查询不起作用,您可以尝试更改视口(viewport)吗?

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

关于iphone - 如何为响应式设计检测屏幕高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14084524/

相关文章:

iphone - 同一个委托(delegate)上的多个 UIActionSheets

iphone - 从应用程序用户那里存储 SQLite 文件的位置

javascript - 当鼠标悬停在另一个 div 上时更改 div 背景

html - 为什么不使用 flex-wrap :wrap? 将 flex 元素换行到第二行

css - 为什么我的 HTML aside block 添加了一个多余的结尾段落分隔符?

javascript - processing.js 如何检测浏览器的大小?

iphone - 运行程序时保持 iphone 处于事件状态

twitter-bootstrap - 如何使响应式 Google-adsense 广告在调整大小时缩放?

html - iPhone 模拟器中的元标记问题

iphone - 自定义 UIPickerView 上方的 UIToolbar 未接收触摸