【问题标题】:viewport meta tags issue on mobile devices移动设备上的视口元标记问题
【发布时间】:2014-12-22 17:54:16
【问题描述】:

我有一个反应灵敏的 Bootstrap 网站。高于 1200 像素,容器为 1170 像素宽,低于 1200 像素,它缩小到 970 像素。低于此值的任何内容也将获得 970px 版本。

在我的元标记中,我有这个:

<meta name="viewport" content="width=device-width, initial-scale=1">

一切都可以在台式电脑以及 iPhone 或 iPad 设备上完美运行。然而,在三星 Galaxy 等基于 Android 的手机上(我相信视口为 360x640 像素),该网站在横向模式下也能正常显示,只是每次加载页面时都会放大。这意味着它显示得很好,但用户必须左右滚动。用户可以缩小,然后显示全角而无需滚动,但下次页面加载时,同样的情况会再次发生。

有什么简单的方法可以调整/解决这个问题吗?

我尝试删除 width=device-width 部分,但这与 iOS 设备上的设计相混淆,并且 1px 行无法正确显示。

【问题讨论】:

    标签: android ios css twitter-bootstrap


    【解决方案1】:

    尝试使用

    @media (whichever desired screens)
    html{zoom:0.7} // this value is not calculated just an example
    

    您可以使用设备宽度/您的 html 宽度来计算

    这对我有用..我需要缩小平板电脑,所以我添加了这个..

    【讨论】:

      猜你喜欢
      • 2015-05-22
      • 2011-12-15
      • 1970-01-01
      • 2011-08-29
      • 2023-03-06
      • 1970-01-01
      • 2016-08-08
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多