Как предотвратить отзывчивую/адаптивную кожу от усадки ниже 360 пикселей шириной

Question

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

UPDATE: До размещения я уже указан видовых тег:

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

И я поставил мин ширину для контейнера 360 пикс. Проблема в том, что при этом 40 пикселей справа скрыты, когда пользователь впервые посещает сайт, так как IPhones и многие другие по умолчанию отображают только 320 пикселей, даже если они способны показывать больше. Я знаю, что они могут уменьшить масштаб, но я хочу, чтобы он показывал 360px во время загрузки.

Answer 1

Так определенно добавить в следующем окне просмотра мета-тег в к голове вашего HTML документа:

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

Вам это нужно, чтобы действительно сделать любой реагирующий работы на телефонах или планшетах.

Я не уверен, если вы хотите, чтобы ваша ширина не превышала 360 пикселей, или вы застряли на 360 пикселей и хотите, чтобы она уменьшалась до 320 пикселей.

Если вы хотите не быть не меньше 360 пикс ... Вы хотите, чтобы ваш элемент «обертка» текучими только до 360 пикс вы можете установить свойство на вашей обертку DIV (или любой другой элемент управления им ширина вашего сайта) в CSS, чтобы сказать min-width: 360px;. Это приведет к тому, что элемент-оболочка не будет иметь ширину меньше 360 пикселей.

Если вы не можете получить его, чтобы изменить размер меньше 360 пикселей и хотите, чтобы он ... Это вид обратного вышесказанного. Возможно, ваш оберточный элемент имеет набор min-width: 360px. В этом случае вы можете удалить это свойство, которое позволит ему масштабироваться более чем на 360 пикселей.

Answer 2

Я не тестировал это изменение в окне просмотра, но попробую попробовать.

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

То, что я надеюсь, что это будет сделать, это ширина равна ширине устройства, если ширина устройства не меньше 360 пикселей (так называемый Iphone), в этом случае сделать ширину 360 пикселей.

Ваш лучший выбор заключается в том, чтобы по-настоящему переключить свое мышление и использовать медиа-запрос, чтобы адаптировать ваш код для лучшей презентации на ширине 320 пикселей. Так что пусть ваш сайт будет отображаться на 320 пикселей в ширину, но измените css, чтобы сайт хорошо вписывался в эту ширину.

Например:

@media screen and (max-width: 360px){ 
    .wrapper { 
    width: auto; 
    } 
    //change some font sizes 
    //put float: none on a few elements that were previously floating 
    //change a few widths of container elements to auto 
    //etc. 
} 

получит натянут CSS в запросе медиа только если устройство 360 пикселей или меньше.