14

我已将此标签放在网页的头部：

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

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

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

我的 iPhone 在 iOS7 上。

编辑：使用 xcode ios 模拟器的 iOS6 上仍然存在问题，所以我认为这不是由于 iOS7 造成的。

4

6 回答 6

44

这是工作！在您使用的页面上：

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

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

于 2013-10-06T13:18:33.543 回答
9

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

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

参见：Thomas Fuchs 的 Twitter 帖子

于 2016-10-22T22:36:47.883 回答
8

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

html { 
    zoom: .8; 
}
于 2013-10-29T16:01:57.757 回答
4

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

为移动设备优化网站的最佳方法是设置 width=device-width。如果您没有设置 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/

于 2013-09-29T17:00:13.307 回答
2

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

webapp 在 iOS 7 中无法正确缩放

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

于 2013-09-29T18:30:24.963 回答
-1

使用下面的代码。

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

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

于 2013-09-29T14:27:09.967 回答