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

Question

Прямо сейчас ширина моего DIV составляет 100%. Это здорово на мобильном телефоне. Он растягивается и не требует от пользователя прокрутки влево или вправо. Это просто "подходит".

Однако на большом мониторе ... DIV растягивается, и все элементы с плавающей точкой: слева - слева, а все элементы с плавающей точкой: справа - все вправо!

Я бы хотел найти решение для этого стиля. Какие атрибуты я могу вставить в этот div, чтобы при просмотре людьми на рабочем столе он достигал максимума в 500 пикселей (и при этом сохранял растяжимость в мобильных устройствах)?

Кстати, я хочу такой же шаблон для мобильного + рабочий стол. (облегчает жизнь)

Спасибо.

Answer 1

Используйте следующий CSS:

max-width: 500px;

Как сказано в другом ответе, он не поддерживается в более ранних версиях Internet Explorer (<= 6, если я прав), но он работает в большинстве, если не во всех мобильных браузерах, как и большинство из них (iPhone, Android) Palm Pre) использует движок WebKit, а Opera Mini и Mobile также поддерживают его. </p>

Answer 2

Вы ищете max-width:

<div style="width: 100%; max-width: 500px"> 

должен выполнить эту работу.

Это не работает в IE <= 6, хотя, и я не знаю оподдержка мобильного браузера - обязательно протестируйте.<a href="http://www.quirksmode.org/css/contents.html" rel="nofollow noreferrer"> Таблица совместимости Quirksmode

Обновление: Opera Mini и Safari Mobile определенно поддерживают его.