meta name = "viewport" не працює як очікується

У мене є цей метатег на моєму веб-сайті www.ssd-vergleichen.de

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

Щоб запобігти первісному масштабування пристрою на веб-сайті. Переглядаючи веб-сайт на моєму мобільному веб-переглядачі Chrome на Samsung Galaxy S2, сайт збільшується приблизно на 400%. Що я зробив неправильно? Чи може хто-небудь допомогти?

Спасибі заздалегідь

Редагувати: з використанням

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

він працює в стандартному веб-браузері Android, але все ще не в Chrome. Цікаво, чи він працює в IOS?

Edit2: No, it also doesn't work with iOS http://iphonetester.com/

enter image description here

4
Оформлення в браузері виконується за допомогою quirksmode.org/mobile/metaviewport Існує інформація про те, які пристрої правильно реалізуйте кожну частину метатегів.
додано Автор Stuart Young, джерело

6 Відповіді

Ти намагався

<meta name="viewport" width="device-width">

Наскільки я розумію, width = "device-width" обмежує ширину макета до ширини пристрою. Напевно, що встановлення intial-scale = 1 дає браузеру можливість збільшити масштаб 100% (тобто не масштабується)?

Оновити

<meta name="viewport" content="width=device-width, initial-scale=1;"/>

Призначається для правильного масштабування адаптованих сайтів. Враховуючи, що ваш сайт фіксовано до ширини 1100 пікс., Налаштування initial scale = 1 не призведе до того, що вся сторінка буде видно.

From the W3C Use Meta Viewport Element To Identify Desired Screen Size

4
додано
Вибачте за допомогою масштабування 100%. Я маю на увазі показ веб-сторінки за бажаним розміром. тобто масштабування, яке, як видається, робить це.
додано Автор Colin Bacon, джерело
це також не працює. І initial scale = 1 означає, що веб-сайт взагалі не збільшений. Я маю на увазі 200% або initial scale = 2
додано Автор Stefano L, джерело

Ви повинні написати

<meta id="viewport" name="viewport" content="[your_content_params]" />

Я спробував це, і це спрацювало.

3
додано

Спробуйте це :

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=320, height=device-height, target-densitydpi=medium-dpi" />
1
додано

У мене була така сама проблема сьогодні, і я зміг це виправити, використовуючи атрибут target-densitydpi, і встановивши його на висоту при встановленні ширини до ширини пристрою

Подібно до цього:

<meta name="viewport" content="initial-scale=0.8, zoom=10%, width=device-width, target-densitydpi=high-dpi">

Це вирішило мою проблему.

0
додано

Спробуйте:

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

with no ;

0
додано
Я використовую зазначений вище код на своєму сайті, і в Chrome він не працює, тому щось може заважати йому. Я перевіряю ваш сайт ...
додано Автор Ian Devlin, джерело
Це взагалі допомагає: stackoverflow.com/questions/11345896/ …
додано Автор Ian Devlin, джерело
здається, працює для звичайного браузера Android, але не для Chrome (перегляньте мою редакцію)
додано Автор Stefano L, джерело
Я вже очистив мій хромовий кеш. Тим не менш, це питання. Схоже, що не працює на iPhone: iphonetester.com
додано Автор Stefano L, джерело

Спробуйте це:

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

У CSS поставте це:

html, body {
    max-width: 100%;
    overflow-x: hidden;
}
0
додано