【问题标题】:Differences in rendering mobile chrome and android native browser渲染移动端chrome和android原生浏览器的区别
【发布时间】:2014-05-08 09:31:44
【问题描述】:

在我的智能手机上测试我的桌面(无响应)网站时,我注意到在 chrome (34.01847.114) 和原生 Android 浏览器 (4.3) 中呈现网站的差异。在 Chrome 中,页面按照我的意愿在没有缩放的情况下呈现。在本机浏览器中,页面被放大。我不使用任何 viewprt-tag。 当我将视口标签设置为

<meta name="viewport" content="width=device-width">

chrome 的行为类似于本机浏览器并进行缩放。

所以我不想要任何缩放,我希望网站以全分辨率呈现。

【问题讨论】:

    标签: android google-chrome viewport


    【解决方案1】:

    为了防止缩放,你应该使用:

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

    希望对你有帮助:)

    【讨论】:

    • 这不适用于桌面(非响应式)网站。在 iOS 中,“如果您将比例设置为 1.0 ,Safari 会假定纵向宽度为 device-width,横向时为设备高度”为 specified in the iOS doc.,这不是您想要的固定桌面设计。跨度>
    【解决方案2】:

    您确定该页面实际上已在 Android 浏览器中放大了吗?我的观察是,如果您只是一遍又一遍地重新加载相同的页面,以前的缩放通常会保持活动状态,这可能会误导您认为这是页面将为用户加载的方式。但是,除了使用刷新/重新加载之外,页面在正常加载时会正常加载。因此,我建议您在可靠地检查缩放行为时确保导航到新页面。

    否则,如果您仍然有问题并且您的桌面网站具有固定宽度,您可以简单地将视口设置为:

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

    其中 fixed-width 是您的固定桌面目标宽度(以像素为单位)。

    这将为您提供一个完整的宽度,并根据每个移动设备的屏幕尺寸重新缩放。

    【讨论】:

      猜你喜欢
      • 2016-03-21
      • 1970-01-01
      • 2012-08-28
      • 2015-10-23
      • 2018-02-20
      • 2016-05-04
      • 1970-01-01
      • 1970-01-01
      • 2013-08-26
      相关资源
      最近更新 更多