Meta视口标记似乎完全被忽略或无效

Question

我已将此标记放在网页的头部:

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

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

有谁知道这可能导致什么？我可以在源代码中清楚地看到它在标题中.

我的iPhone在iOS7上.

编辑:问题仍然在iOS6上使用xcode ios模拟器,所以我不认为这是由于iOS7.

Answer 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">

它不会被忽视.

UPDATE1

我刚看到你的代码中似乎你正在使用我的第二个视口,但我可能通过javascript更改为640px视口.多数民众赞成也许是因为你觉得它被忽略了.因为在运行时视口变化了......

UPDATE2

好的发现了问题.

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');
    }
} 

您的页面正在调用此函数来覆盖您的视口.你知道那个功能吗？

Answer 2

作为解决方法，您应该尝试以下代码：

html { 
    zoom: .8; 
}

Answer 3

我知道这是一个古老的问题,但是当我遇到这个问题时,这是谷歌的第一个结果,所以我认为我会更新iOS 10.

苹果现在似乎完全凌驾于user-scalable=noiOS 10中以改善可访问性

请参阅:Thomas Fuchs的Twitter帖子

Answer 4

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

为移动设备优化网站的最佳方法是设置width = device-width.如果未设置initial-scale = 1.0,则在更改设备旋转时iO将放大(放大)屏幕.

这个元就是你所需要的.

<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/