元视口标记似乎完全忽略或无效 [英] Meta viewport tag seems to be ignored completely or has no effect

问题描述

我已将此标记置于网页的头部：

< meta name =viewportcontent =width = device-width，initial-scale = 0.47，maximum-scale = 1>

由于某些原因，它似乎在我的iPhone上被忽略，甚至添加了 user-scalable = no 没有影响。我曾尝试过很多宽度值，初始缩放比例等......没有任何效果。

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

我的iPhone在iOS7上。

编辑：问题仍然发生在使用xcode ios模拟器的iOS6上，所以我不认为这是iOS7引起的。

>解决方案

它正在工作！在您使用的网页上：

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

当我在手机上打开页面时（ios7 iphone5），我看到了正确的结果。 p>

您是否100％确定您尝试在您的代码中放入以下内容？

 < meta name =viewportcontent =width = device-width，initial-scale = 1.0，user-scalable = no> 
  

不会被忽略。

UPDATE1

我刚才看到在你的代码中，你似乎正在使用我的第二个视口，但我可能通过JavaScript更改为640像素的视口。这也许就是为什么你觉得它被忽略的原因。因为在运行期间，视口被改变...

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'）; 
 
 
 
 
 $ b $ p 
 $ b 
你的页面正在调用这个覆盖你的视口的函数。你知道那个功能吗？ 
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">

For some reason, it simply seems to be ignored on my iPhone, even adding user-scalable=no has no effect. I have tried many values of width, initial-scale etc... nothing seems to have any effect.

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.

Edit: The problem is still happening on iOS6 with the xcode ios simulator, so I don't think it is due to iOS7.
解决方案
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.

Are you 100% sure you really tried putting the following in your code?
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
It doesn't get ignored.

UPDATE1

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

UPDATE2

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?

                        
这篇关于元视口标记似乎完全忽略或无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！