Мобильный дизайн CSS?

Question

Я пытаюсь сделать свой первый мобильный сайт, просто используя другую таблицу стилей, но я замечаю, что это сложнее, чем я ожидал. Все действительно отличается, когда я тестирую как iPhone 4S, так и андроид моей жены. Что мне нужно использовать, чтобы сделать его похожим на мобильный сайт Facebook? Где вы не можете увеличивать или уменьшать масштаб, и все это просто подходит для вашего экрана?

Answer 1

Для того, чтобы убедиться, что ваша страница не должна быть увеличена, добавьте следующий тег meta в вашем HTML:

<meta name="viewport" 
content="width=device-width, initial-scale=1.0; 
maximum-scale=1.0; user-scalable=0"></meta> 

Он делает следующее:

• Ширина окна просмотра (width=device-width)
• Начальные и максимальные весы установлены на 1.0
• Пользователи с caling (масштабирование) отключена

Если вы ищете способы, чтобы ваш сайт гладко работать для мобильных устройств, планшетов, а также настольные устройства, ключевое слово является адаптивный дизайн (или отзывчивый веб-дизайн). Прочтите this article on A List Apart, чтобы начать. Также для чрезвычайно популярного (очень похожего на Facebook) отзывчивого макета см. Twitter Bootstrap. Для высокомобильных оптимизированных компонентов пользовательского интерфейса я действительно рекомендую взглянуть на jQuery Mobile.

Answer 2

Взгляните на документацию Apple в Safari Developer Library. В основном вам нужно использовать теги meta, чтобы сообщить браузеру свой мобильный телефон. Вы также можете настроить стиль масштабирования и прочее с помощью этих тегов.

В частности, вы хотите

<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' /> 

Следует отметить, что, вероятно, некоторые из вещей, описанных в библиотеке разработчиков Safari будет работать только на IOS устройств. Однако код выше должен работать как на Android, так и на iOS.