Какие моменты я должен учитывать при создании веб-сайта, чтобы он правильно отображался на смартфонах?

Question

Я собираюсь создать сайт, используя xhtml, css, javascript и php.И этот веб-сайт должен правильно отображаться на iPhone и других видах смартфонов, точно так же, как он будет отображаться на компьютерах, поэтому я хочу знать, какие моменты я должен учитывать при создании такого веб-сайта.

Answer 1

1) Используйте тег <meta name="viewport">, чтобы правильно установить масштаб так, чтобы ваш контент занимал весь экран

2) Избегайте внутренней прокрутки областей, таких как iframes или div, с помощью overflow:scroll, так как они не работают наiOS4 и более ранние версии, или большинство версий Android

3) Избегайте position:fixed привязывать навигацию к определенным частям экрана, поскольку это не работает на iOS4 и более ранних версиях, или в большинстве версий Android

4) Не полагайтесь на интерактивное или основанное на опрокидывании взаимодействие, такое как выпадающие меню, которые появляются при наведении курсора мыши, потому что они плохо работают или вообще не работают на сенсорных устройствах

5) Избегайте мелкого текста илиссылки сближаются, потому что, если ваша страница имеет ширину 800px и она сокращается до экрана 320px, их будет трудно читать или нажимать.

6) Не используйте Flash

В целом, у вас есть выбор, как подойти к этому:

1) Создайте единый дизайн сайта с красивым большим текстом, который можно хорошо использовать при уменьшении до небольшого экрана

2) Создайте дваLayoдля вашего сайта и используйте запросы разрешения медиа-файлов JavaScript или CSS для переключения таблиц стилей между мобильной и настольной версиями, или

3) Создайте так называемый жидкий макет, где ширина может быть изящно масштабирована для разных размеров экрана безмасштабирование

Answer 2

Вы должны:

1. Сделать свой список смартфонов более конкретным .Их много, и в принципе невозможно создать продвинутый интерактивный сайт, работающий корректно на каждом устройстве, которое соответствует хотя бы одному определению смартфон .
2. Постоянно тестируйте его наустройство , даже официальные эмуляторы не работают точно так, как работает устройство (я полагаю, Apple рекомендует тестировать на устройстве вместо того, чтобы полагаться на их эмулятор).
3. Обратите внимание на свои сценарии, используя события JavaScript, такие как clickили hover - они могут быть более сложными на целевых устройствах (например, touchstart, touchend, touchmove и многие другие) и убедиться, что вы учитываете события с сенсорным экраном.

Если вы уже определили свои целевые телефоны, вы можете проверить, например, если.некоторые мобильные JavaScript-фреймворки удовлетворяют вашим потребностям (например, Sencha, но я обнаружил, что он не работает по крайней мере на одной модели телефона Symbian, которую я тестировал).

Вам также следует проверить таблицы совместимости, показывающие, какую конкретную функцию вы хотите использовать.Использование доступно на каком смартфоне и браузере.Это должно сэкономить вам много времени.