Тег Meta viewport, кажется, полностью игнорируется или не имеет эффекта

Я поставил этот тег в начало веб-страницы:

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

По какой-то причине он просто игнорируется на моем iPhone, даже добавление user-scalable=no не влияет. Я пробовал много значений ширины, начального и т.д.... ничего не имеет никакого эффекта.

Кто-нибудь знает, что может быть причиной этого? Я ясно вижу в источнике, что он есть в заголовке.

Мой iPhone находится на iOS7.

Изменить: Проблема все еще происходит на iOS6 с симулятором xcode ios, поэтому я не думаю, что это связано с iOS7.

ОТВЕТЫ

Ответ 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');
    }
}

Ваша страница вызывает эту функцию, которая переопределяет ваш видовой экран. Знаете ли вы об этой функции?

Ответ 2

Я знаю, что это старый вопрос сейчас, но это был первый результат в Google, когда у меня возникла эта проблема, поэтому я подумал, что я буду обновлять в отношении iOS 10.

Похоже, Apple теперь полностью переопределяет user-scalable=no в iOS 10, чтобы улучшить доступность

Смотрите: пост Томаса Фукса в Твиттере

Ответ 3

Ширина области просмотра в разных устройствах различна. У iOS 320, у Android 360 в портретном режиме. Пейзажный режим - это зависит от того, какое у вас устройство, вы получите разную ширину.

Лучший способ сделать сайт оптимизированным для мобильных устройств - установить ширину = ширина устройства. Если вы не установили начальный масштаб = 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/

Ответ 4

В качестве обходного пути вы должны попробовать следующий код:

html { 
    zoom: .8; 
}

Ответ 7

Используйте код ниже.

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

Он хорошо работает во многих моих проектах.

Ответ 8

Мне тоже нужна помощь с этим старым вопросом! Кто-нибудь может понять, что я делаю не так?

<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon"href="#" onclick="location.href='http://jeffhenrikson.com/favicon.ico'; return false;" />
<title>Jeff Henrikson</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="#" onclick="location.href='https://www.w3schools.com/w3css/4/w3.css'; return false;">
</head>


<style type="text/css">

html, body {
    font-family: Arial, Helvetica, sans-serif;
    color: #000;
    font-size: 14px;
    height: 768px;
    width: 1100px;
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin: auto;
}

a:link {
    color: #000;
    text-decoration: none;
}
a:visited {
    color: #000;
    text-decoration: none;
}
a:hover {
    color: #000;
    text-decoration: line-through;
}
a:active {
    color: #000;
    text-decoration: none;
}

@viewport {
  width: device-width ;
  zoom: 1.0 ;
}

</style>

<body>

<div style="position: relative; top: 75px; left: 135px;">
<img src="images/01.jpg" width="x" height="575"/></a>
</div>

<div style="position: absolute; top: 276px; left: 50px;">
  <a href="38.html">&#11044;</a>
 </div>
<div style="position: absolute; top: 276px; left: 1035px;">
  <a href="02.html">&#11044;</a>
</div>

<div style="position: absolute; top: 15px; left: 17px;">
<a href="index.html">JEFF HENRIKSON</a>
</div>
<div style="position: absolute; top: 15px; left: 982px; width: 55px;">
<a href="all_index.html">view all</a>
</div>
<div style="position: absolute; top: 719px; left: 982px;">
<a href="contact.html">contact</a>
</div>

</div>

</body>
</html>