странное поведение начального масштабирования для окна просмотра

Я пытаюсь понять, как работает окно просмотра и начальное масштабирование. Я прочитал this, this и this и попробовал следующий эксперимент, который я могу воспроизвести на галактике samsung s4 с использованием версии firefox версии 43.0.странное поведение начального масштабирования для окна просмотра

Если открыть веб-страницу в галактике s4, содержащей этот код:

<!DOCTYPE html > 
<html > 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
    <title>Test</title> 
    <meta name="viewport" content="width=300px, initial-scale=2.0"/>  
    </head> 
    <body> 
    <div style='background-color:red;width:100%'>Adam 8</div>   
    </body> 
</html>

тогда я получаю следующий результат:

Это имеет смысл для меня, потому что DIV имеет ширина 300 пикселей CSS, галактика s4 имеет 640 пикселей устройства, а начальная шкала = 2 должна заставить мой телефон использовать 600 пикселей устройства для представления 300-пиксельного div-контейнера с CSS-пикселем, который дает пустое пространство 40 пикселов устройства (однако пустое пространство действительно выглядит и затем 40 пикселов устройства для меня, но сейчас я его не буду игнорировать). Затем я изменил первоначальный масштаба от 2 до 1:

<!DOCTYPE html > 
<html > 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
    <title>Test</title> 
    <meta name="viewport" content="width=300px, initial-scale=1.0"/> 


    </head> 
    <body> 
    <div style='background-color:red;width:100%'>Adam 9</div> 

    </body> 
</html>

Так как начальных шкал = 1, я предположил, что мой телефон использует только 300 пикселя устройства для представления красной полосы. Тем не менее, я получаю это:

Почему redbar в настоящее время 640 пикселей устройство длиной вместо 300 пикселей устройства?

источник

2016-01-05 Adam

Во втором примере метатег вашего вида просмотра слишком ограничен. Браузер ограничит минимальный уровень масштабирования таким образом, что вы не сможете уменьшить масштаб, чтобы увидеть его за пределами содержимого. В вашем случае содержание составляет ~ 300 пикселей, а размер экрана - 640 пикселей, поэтому минимальный уровень масштабирования будет ~ 2.1. Тем не менее, вы указали начальный масштаб = 1.0, так что этого не понять. В этом случае браузер решил почерпнуть начальную шкалу, расширив ширину содержимого, чтобы разрешить указанный масштаб.

Первый случай немного более озадачен для меня, поскольку одно и то же должно происходить в меньшей степени. Вот picture того, как он выглядит в Chrome на моем Nexus 4, который имеет ту же высоту экрана.

В общем случае метатег viewport не указан, и поведение в этих случаях зависит от браузера. Я бы вообще не стал устанавливать начальную шкалу и позволял браузеру делать это автоматически. Как правило, они будут пытаться уменьшить масштаб, чтобы соответствовать всему содержанию на экране.

источник

2016-01-06 19:07:55

странное поведение начального масштабирования для окна просмотра

ответ

Смежные вопросы