Question

我已将此标记放在a webpage：

的标题中

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

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

有谁知道可能导致这种情况的原因？我可以在源代码中清楚地看到它在标题中。

我的iPhone在iOS7上。

编辑：问题仍然出现在带有xcode ios模拟器的iOS6上，所以我认为这不是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

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

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

See: Thomas Fuchs' Twitter Post

Answer 3

可能设备中的视口宽度不同。 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/

Answer 4

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

html { 
    zoom: .8; 
}

Answer 5

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

webapp not scaling properly in iOS 7

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

Answer 6

你不应该担心IOS 7，它有很多错误：http://www.infoworld.com/t/html5/bad-news-ios-7s-html5-full-of-bugs-227685

可能是你的代码完全可以，但iOS问题？

Answer 7

使用以下代码。

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

在许多矿山项目中运作良好。

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

7 个答案: