Как указать значение по умолчанию для режима просмотра устройства Chrome?

Моя проблема подобна этой, но я спрашиваю здесь, потому что там не было реального ответа. (meta viewport has no effect in Chrome Device Mode)Как указать значение по умолчанию для режима просмотра устройства Chrome?

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

Как я понимаю, iOS на iPhone 5S отображает вашу страницу так, как если бы она была шириной 980px по defualt, а затем масштабируется, чтобы поместиться на маленьком экране. Если у вас нет метатега, чтобы указать ширину и начальную шкалу, текст будет крошечным. На моем телефоне это именно то, что происходит, и линии разрываются на 980 пикселей, как и ожидалось. В режиме устройства Chrome шрифт имеет нормальный размер и легко читается, а линии разбиваются примерно на 335 пикселей. (Даже при 320 пикселей, которая является шириной физического устройства?)

Как это исправить? Это ошибка? Есть ли настройка, которую я могу изменить, чтобы заставить ее вести себя как физическое устройство? Это делает тестирование мобильного телефона совершенно бесполезным, не так ли?

Этот HTML-код используется для тестирования. (Нет CSS.)

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Viewport testing</title> 
</head> 
<body> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
</body> 
</html>

P.S. Не могу понять, как сложить текст Lorem ipsum, извините.

источник

2017-02-15 AlwaysLearning

Просто добавьте

<meta name="viewport" content="width=device-width, initial-scale=1.0">

и все страницы будут вписываться в экран (без CSS). Это не ошибка, просто отсутствие информации для браузера.

источник

2017-02-16 00:03:35

Я знаю, что добавление, которое изменит его внешний вид на моем телефоне, но это не вопрос. Извините, если я не понял. Я хочу сказать, что один и тот же код * должен отображаться таким же образом на моем телефоне и в режиме устройства в Chrome, иначе в чем смысл «режима устройства». Либо это ошибка, либо в Chrome есть настройка, о которой я не знаю, чтобы она вела себя так же, как это делает физическое устройство. Или, может быть, это что-то еще. Независимо от того, что мне нужно сделать, чтобы заставить его вести себя одинаково? – AlwaysLearning

Хром на самом деле правильно имитирует устройство. Если вы запустите свой пример в Chrome на Android, вы увидите, что он выглядит так же, как в режиме устройства DevTools. Кроме того, если вы проверите window.innerWidth в DevTools, вы увидите, что это ~ 980, как вы ожидали, учитывая отсутствие метки вида <meta>.

Что вы видите, это еще один аспект Chrome Mobile, который эмулируется: повышение шрифта. На старых страницах (т. Е. Страниц, на которых нет метки вида <meta>). Chrome будет увеличивать размер небольшого текста, чтобы его было легче читать для пользователей. Это заставляет выглядеть так, как будто ваша страница отображается в меньшей ширине, чем она есть на самом деле.

Попробуйте disabling font boosting или добавьте изображение к вашему примеру, и должно быть яснее, что эмуляция работает правильно.

источник

2017-02-21 23:32:14

Благодарим вас за ответ, но у меня нет устройства Android. Я сравниваю Chrome Device Tools Device Mode для «iPhone 5» с моим физическим iPhone 5S. Разве они не должны делать то же самое? Если я не понял ваш ответ ... – AlwaysLearning

Нет, мобильная эмуляция Chrome по-прежнему использует механизм рендеринга Blink для рендеринга страницы. Он может быть очень близок к тому, как страница будет выглядеть на Chrome на Android, поскольку она использует тот же движок. Однако Chrome на iOS использует встроенный iOS WebView, который использует WebKit, поэтому настольный Chrome не может полностью имитировать его. Это лучше, но эти различия будут возникать - по большей части, это просто эмуляция размеров устройства.Если для вас важно, чтобы ваша страница правильно работала на устройстве, вы должны протестировать на реальном оборудовании (особенно для характеристик производительности!) –

Спасибо за объяснение. Хотя, я не уверен, что вижу смысл иметь «эмулятор», который отображает один и тот же код по-разному. Моя причина для его использования заключалась в том, чтобы я мог видеть, как это выглядит без необходимости загружать, а затем использовать мой физический телефон для каждого небольшого изменения. Я понимаю, что эмулятор не был бы точным для каждой маленькой детали, но это кажется довольно крупным, для которого не удается. – AlwaysLearning

Как указать значение по умолчанию для режима просмотра устройства Chrome?

ответ

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