【问题标题】:Meta viewport tag seems to be ignored completely or has no effect元视口标签似乎被完全忽略或没有效果
【发布时间】:2013-10-03 15:48:38
【问题描述】:

我已经把这个标签放在a webpage的头部:

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

由于某种原因,它似乎在我的 iPhone 上被忽略了,即使添加 user-scalable=no 也没有效果。我尝试了许多宽度、初始比例等值......似乎没有任何效果。

有谁知道这可能是什么原因造成的?我可以在源代码中清楚地看到它在标题中。

我的 iPhone 在 iOS7 上。

编辑:在 iOS6 上使用 xcode ios 模拟器时问题仍然存在,所以我认为不是 iOS7 造成的。

【问题讨论】:

    标签: html iphone ios css


    【解决方案1】:

    它正在工作!在您正在使用的页面上:

    <meta content="width=640, initial-scale=0.47, maximum-scale=1.0, user-scalable=1" name="viewport">
    

    当我在手机 (ios7 iphone5) 上打开页面时,我看到了完全正确的结果。

    您是否 100% 确定您真的尝试将以下内容放入您的代码中?

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    

    它不会被忽略。

    更新1

    我刚刚在您的代码中看到,您似乎正在使用我的第二个视口,但我可能被 javascript 更改为 640px 视口。这也许就是为什么你觉得它被忽略的原因。因为在运行时视口会发生变化...

    更新2

    好的,找到问题了。

    function updateWidth(){
        viewport = document.querySelector("meta[name=viewport]");
        if (window.orientation == 90 || window.orientation == -90) {
            viewport.setAttribute('content', 'width=1401, initial-scale=0.34, maximum-scale=1.0, user-scalable=1');
        }
        else {
            viewport.setAttribute('content', 'width=640, initial-scale=0.47, maximum-scale=1.0, user-scalable=1');
        }
    } 
    

    您的页面正在调用此函数,该函数会覆盖您的视口。你知道这个功能吗?

    【讨论】:

    • 啊,当然。一年前我把这个功能放在了,完全忘记了。非常感谢,唯一真正看代码发现问题的人!
    • @andreas-daoutis:完美捕捉!
    【解决方案2】:

    我知道这是一个老问题了,但是当我遇到这个问题时,这是谷歌的第一个结果,所以我想我会针对 iOS 10 进行更新。

    Apple 现在似乎完全覆盖了 iOS 10 中的 user-scalable=no 以提高可访问性

    See: Thomas Fuchs' Twitter Post

    【讨论】:

      【解决方案3】:

      作为一种解决方法,您应该尝试以下代码:

      html { 
          zoom: .8; 
      }
      

      【讨论】:

      • 你拯救了我的一天!并将其放入@media 块中。完美!
      • 你能再解释一下吗?怎么用?
      • 最佳解决方法。我们可以使用媒体查询来定义屏幕尺寸,我们希望这个缩放属性是正常的,并且在某些特定的屏幕尺寸下,我们可以将其设为 0.8。完美
      【解决方案4】:

      视口宽度在可能的设备中有所不同。 iOS 有 320,android 有纵向模式下的 360。横向模式 - 这取决于您拥有的设备,您将获得不同的宽度。

      为移动设备优化网站的最佳方法是设置宽度=设备宽度。如果您没有设置 initial-scale=1.0 - iOs 将在更改设备旋转时放大(放大)屏幕。

      这个元是你所需要的。

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

      如果您想禁用缩放功能,请设置 user-scalable=no

      <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
      

      不要硬编码宽度属性,因为它会为纵向和横向模式设置相同的宽度 - 这是非常不愉快的用户体验。

      最佳记录:https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

      关于 iOs 7 此外,我会说 - 现在不要担心 iOS7。它有很多错误。在这里阅读:http://www.sencha.com/blog/the-html5-scorecard-the-good-the-bad-and-the-ugly-in-ios7/

      【讨论】:

      • 如前所述,视口标签似乎没有任何效果,设备宽度、初始比例等也没有任何变化。我在下面的评论中提到我也通过 xcode 的 ios 尝试了 iOS6模拟器也无济于事,一个简单的jsbin 在 iOS7 中工作正常
      • 我也有 iOS 7,最近更新了。你知道 - belovedobjects.de 看起来不错。
      • 我们不得不对文本中断的方式进行一些调整,使其看起来“很好”,但问题是我真的不明白为什么视口标签没有任何效果。
      • meta 没有效果是什么意思?如果这不起作用 - 您的页面将无法在移动设备上正确缩放。我看事情还行。见here
      • 据我所知,由于 CSS 媒体查询,它被缩放了。我相信没有效果,因为如果我取出视口标签,页面看起来完全一样。此外,使用视口标签和user-scalable=no,该网站仍然是可缩放/可缩放的。
      【解决方案5】:

      似乎 ios7 无法正确识别元​​标记。 以下是可能对您有所帮助的链接。

      webapp not scaling properly in iOS 7

      http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review

      【讨论】:

      • 我也尝试过 iOS6 的 xcode 模拟器,但它似乎也不起作用。我已经尝试在jsbin 中使用它,即使在 iOS7 上也可以使用,所以我真的不确定是什么导致了这个问题。
      • 你可以尝试像这样将 target-densitydpi 添加到元标记
      • 不幸的是没有效果 :( 我真的很困惑为什么元标记似乎被完全忽略了。它与使用 CSS 媒体查询有什么关系吗?
      【解决方案6】:

      使用下面的代码。

      <meta name="viewport" content="width=320, initial-scale=1, user-scalable=yes">
      

      它在我的许多项目中运行良好。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2011-07-22
        • 1970-01-01
        • 2014-08-10
        • 2021-10-28
        • 2016-09-30
        • 2012-03-11
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多