Html 元视口标签似乎被完全忽略或没有效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19049198/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Meta viewport tag seems to be ignored completely or has no effect
提问by waffl
I have put this tag in the head of a webpage:
我已经把这个标签放在网页的头部：
<meta name="viewport" content="width=device-width,initial-scale=0.47,maximum-scale=1">
<meta name="viewport" content="width=device-width,initial-scale=0.47,maximum-scale=1">
For some reason, it simply seems to be ignored on my iPhone, even adding user-scalable=nohas no effect. I have tried many values of width, initial-scale etc... nothing seems to have any effect.
出于某种原因，它似乎在我的 iPhone 上被忽略了，即使添加user-scalable=no也没有效果。我尝试了许多宽度、初始比例等值......似乎没有任何效果。
Does anyone know what might be causing this? I can see clearly in the source that it is there in the header.
有谁知道这可能是什么原因造成的？我可以在源代码中清楚地看到它在标题中。
My iPhone is on iOS7.
我的 iPhone 是 iOS7。
Edit:The problem is still happening on iOS6 with the xcode ios simulator, so I don't think it is due to iOS7.
编辑：使用 xcode ios 模拟器的 iOS6 上仍然存在问题，所以我认为这不是由于 iOS7。
回答by Andreas Daoutis
It is working! On your page you are using:
这是工作！在您使用的页面上：
<meta content="width=640, initial-scale=0.47, maximum-scale=1.0, user-scalable=1" name="viewport">
When I open the page on my phone (ios7 iphone5) I see exactly the right result.
当我在手机（ios7 iphone5）上打开页面时，我看到的结果完全正确。
Are you 100% sure you really tried putting the following in your code?
您是否 100% 确定您真的尝试将以下内容放入您的代码中？
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
It doesn't get ignored.
它不会被忽视。
UPDATE1
更新1
I just saw that in your code it seems you are using my second viewport but i gets changed probably by javascript to the 640px viewport. Thats maybe the reason why for you it feels like it gets ignored. Because during runtime the viewport gets changed...
我刚刚在您的代码中看到，您似乎正在使用我的第二个视口，但我可能被 javascript 更改为 640px 视口。这可能就是为什么你觉得它被忽视的原因。因为在运行时视口会发生变化......
UPDATE2
更新2
Ok found the problem.
好的发现问题了。
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');
}
}
Your page is calling this function which overrides your viewport. Did you know about that function?
您的页面正在调用此函数，该函数会覆盖您的视口。你知道那个功能吗？
回答by ConduciveMammal
I know this is a hella old question now but it was the first result in Google when I had this issue so thought I'd update in regards to iOS 10.
我知道这是一个非常古老的问题，但这是我遇到此问题时在 Google 中的第一个结果，因此我想我会针对 iOS 10 进行更新。
It seems Apple now completely overrides the user-scalable=noin iOS 10 in order to improve accessibility
Apple 现在似乎完全覆盖了user-scalable=noiOS 10 中的 以提高可访问性
回答by WvdW
You should try, as a workaround, the following code:
作为解决方法，您应该尝试以下代码：
html {
zoom: .8;
}
回答by Shekhar K. Sharma
Viewport width is different in may devices. iOS has 320, android has 360 in portrait mode. Landscape mode - it depends on which device you have, you will get different different width.
视口宽度因设备而异。iOS 有 320，android 有 360 纵向模式。横向模式 - 这取决于您拥有的设备，您将获得不同的宽度。
Best way to make website optimized for mobile is set width=device-width. If you don't set initial-scale=1.0 - iOs will zoom in (enlarge) screen when changing device rotation.
为移动设备优化网站的最佳方法是设置 width=device-width。如果您未设置 initial-scale=1.0 - iOs 将在更改设备旋转时放大（放大）屏幕。
This meta is all you needed.
这个元就是你所需要的。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
And if you wanted to disable the zoom feature, set user-scalable=no
如果您想禁用缩放功能，请设置 user-scalable=no
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
Do not hard code width property as it will set same width for portrait and landscape modes - which is very unpleasing user experience.
不要硬编码 width 属性，因为它会为纵向和横向模式设置相同的宽度 - 这是非常不愉快的用户体验。
Best documented: https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
最佳记录：https: //developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
About iOs 7Moreover I would say - dont worry about iOS7 as of now. It has so many bugs. Read here: http://www.sencha.com/blog/the-html5-scorecard-the-good-the-bad-and-the-ugly-in-ios7/
关于 iOs 7此外，我想说 - 现在不要担心 iOS7。它有很多错误。在这里阅读：http: //www.sencha.com/blog/the-html5-scorecard-the-good-the-bad-and-the-ugly-in-ios7/
回答by sourav
It seems that ios7 is not recognising the meta tag properly. Here are the links which may help you.
似乎 ios7 没有正确识别元标记。以下是可能对您有所帮助的链接。
webapp not scaling properly in iOS 7
http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review
http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review
回答by user2836265
You shouldn't be worrying about IOS 7 yet, it has so many bugs: http://www.infoworld.com/t/html5/bad-news-ios-7s-html5-full-of-bugs-227685
你不应该担心 IOS 7，它有很多错误：http: //www.infoworld.com/t/html5/bad-news-ios-7s-html5-full-of-bugs-227685
May be your code is perfectly okay but issue with iOS?
可能是您的代码完全没问题，但 iOS 有问题？
回答by Fahim Parkar
Use below code.
使用下面的代码。
<meta name="viewport" content="width=320, initial-scale=1, user-scalable=yes">
It works well in many of mine project.
它在许多矿山项目中运行良好。
