Регулировка ширины для мобильных устройств

Question

Я переписал свой веб-сайт для форматирования для мобильных устройств. Однако ширина дисплея несовместима на разных устройствах. На моем устройстве Android ширина выглядит отлично, но на устройстве Android другого человека ширина намного меньше и, следовательно, нечитаема.

Я использую следующий видовой экран в моем HTML файле:

<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, user-scalable=no"/

Это моя основная ДИВ на странице HTML:

 <div id="maindiv" style="margin-left:1.0em; margin-right:0.5em"> 

мне нужно поставить ширину параметра Я в моей основной DIV Do ? Или может кто-нибудь сказать мне, что я должен сделать, чтобы обеспечить единую ширину тела для мобильных устройств?

Answer 1

вам нужно создать отзывчивый сайт. Если у вас есть фиксированная ширина на divs, вам нужно будет использовать css media queries. Поскольку IE 8 и старше не поддерживают медиа-запросы, вы можете использовать плагин как respond.js. С помощью этого плагина вам нужно будет добавить его на свою страницу и использовать медиа-запросы, как обычно.

У вас есть ссылка на сайт?

Запросы средств массовой информации могут использоваться для таргетинга на определенную ширину браузера/устройства, чтобы вы могли стилизовать вещи только в том случае, если браузер/устройство соответствует этой спецификации квитирования.

Однако, если вы меняете ширину #maindiv на 100% или используете максимальную ширину, я считаю, что это исправит вашу проблему. Кроме того, в внешней таблице стилей или на странице вы хотите добавить следующую CSS, чтобы сделать ваши изображения в ответ:

img { 
max-width:100% 
height:auto; 
display:inline-block; 
} 

Также удалите:

<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, user-scalable=no" /> 

и поставить:

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