Блог

Главная - Вопросы по программированию - Как добиться максимальной совместимости с большинством устройств для мобильного веб-сайта?

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

#css #xhtml #mobile #mobile-website #mobile-phones

#css #xhtml #Мобильный #мобильный веб-сайт #мобильные телефоны

Вопрос:

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

введите описание изображения здесь

Я думаю использовать

Этот документ для HTML

 <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
    "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">

И только те селекторы и свойства, которые поддерживаются CSS Mobile Profile 2.0

  • Изображения не должны использоваться часто, и не следует использовать прозрачные изображения
  • Javascript не поддерживается на старых мобильных устройствах
  • Некоторые селекторы CSS 2.1 несовместимы в старых браузерах
  • Макет не должен иметь фиксированной ширины, поскольку существуют различные размеры экрана
  • Хорошо не использовать внешний CSS. CSS внутри было бы неплохо
  • HTML 5 doctype поддерживаться не будет, поэтому я буду использовать XHTML Basic 1.1
  • Ни для одного элемента не должно быть определено width и float
  • http-запросов должно быть намного меньше
  • Не font-family должно быть определено

Я не уверен в некоторых вещах?

  • Должен ли я использовать CSS-спрайты, если это возможно?
  • Должен ли я вместо этого создать макет
  • Встроенный CSS лучше внешнего CSS?
  • Должен ли я использовать какой-либо код сброса css при настройке css?
  • Должен ли я использовать utf-8 или ISO?
  • Возможно ли использовать проверку формы?
  • Не следует ли мне давать какую-либо ссылку, которая открывает новое окно?
  • Обязательно ли использовать use em вместо px для определения размера шрифта?

Достаточно ли моих замечаний?

Хотя я собираюсь почитать http://www.w3.org/TR/mobile-bp / в деталях, и я также проверил http://html5boilerplate.com/mobile / но это для всех, включая смартфоны , но некоторые вещи полезны

Интерфейсные матрицы смартфонов
https://spreadsheets.google.com/spreadsheet/ccc?authkey=CJPSkfwOamp;pli=1amp;hl=enamp;key=tLen0XZBVTziVZBzwwQFxlwamp;hl=enamp;authkey=CJPSkfwO#gid=0

Разрешение экрана мобильного телефона, отсортированное по марке и модели
http://cartoonized.net/cellphone-screen-resolution.php

Но что еще вы посоветуете рассмотреть на личном опыте, есть ли какие-нибудь советы?

Ответ №1:

Почему вы используете <?xml version="1.0" encoding="UTF-8"?> ?? Это xml-заголовок, а не html.

По поводу вопросов:

  • Изображения не должны использоваться часто, и не следует использовать прозрачные изображения

Вы можете использовать прозрачный GIF, они в некоторой степени поддерживаются. Прозрачный Png, однако, нет.

  • Javascript не поддерживается на старых мобильных устройствах

Дело не в том, что он не поддерживается. Во-первых, JS всегда отключен по умолчанию в старых браузерах. Вторая проблема заключается в глючных реализациях JS. Третий фактор заключается в том, что у старых мобильных устройств были ограниченные ресурсы, а поскольку JS работает на стороне клиента, это может привести к сбою / замедлению работы телефона.

  • Макет не должен иметь фиксированной ширины, поскольку существуют различные размеры экрана

На мобильных устройствах совет ВСЕГДА использовать гибкие макеты (на основе%)

  • Хорошо не использовать внешний CSS. CSS внутри было бы неплохо

Встроенный css лучше всего подходит для старых устройств, поскольку у большинства из них возникают проблемы со слишком большим количеством запросов или при применении стилей к dom. Помните, что они используют EDGE или, что еще хуже, WAP-соединения, которые почти так же плохи, как коммутируемый доступ.

  • HTML 5 doctype поддерживаться не будет, поэтому я буду использовать XHTML Basic 1.1

Вы можете использовать XHTML basic или даже лучше, <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">

  • Ни для одного элемента не должны быть определены width и float

Ширина, всегда в%. Float, никогда. Вплоть до S60 3rd FP1, поплавки были с ошибками на симбианах. (N73 работает на S60 3rd, а float содержит ошибки. На N95 ‘ S60 3rd FP1 значение float было исправлено в большинстве случаев, но все равно время от времени возникала ошибка, в зависимости от использования). То же самое относится к абсолютной и фиксированной позиции.

  • http-запросов должно быть намного меньше

По возможности сокращайте. Чем больше запросов, тем больше раз дерьмовому wap / edge нужно что-то получить, и больше времени занимает загрузка.

  • Семейство шрифтов не должно быть определено

Семейство и размер — это две вещи, которые раздражают старые устройства. Большинство из них получили собственные шрифты и размеры. Например: Motorola V3R / RAZR V3 получила собственный шрифт только одного размера (каждая буква занимает около 7 ~ 9 пикселей экрана, если я правильно напоминаю). Но вы можете объявить Arial, поскольку это обычный шрифт, и он будет использоваться, когда он будет установлен в браузере.

  • Должен ли я использовать CSS-спрайты, если это возможно?

Избегайте любой ценой. Уменьшая количество запросов, вы сталкиваетесь с другой проблемой: ваш макет будет изменчивым, а расположение фона обычно искажается при использовании процентов. И старый Blackberries любит баги с фоновым изображением.

  • Встроенный CSS лучше внешнего CSS?

На мой взгляд, да. Поскольку подключение и рендеринг происходят медленно, если по какой-либо причине ваш файл css истекает, (и без того плохой) макет будет хуже.

  • Должен ли я использовать какой-либо код сброса css при настройке css?

Раньше я использовал YUI one, но в действительно старых браузерах (опять же V3r и near) просто не имеет такого большого значения. Но это хорошо, когда вы показываете клиентам: P

  • Должен ли я использовать utf-8 или ISO?

Действительно зависит от того, каким будет ваш контент. Если вы кодируете все объекты html (например, используя латинские символы), используйте UTF-8. Если вы не кодируете, попробуйте ISO. Но в любом случае старые браузеры используют собственную кодировку. Проверьте браузер N95, например, вы можете установить свою собственную кодировку, таким образом, искажая кодировку html.

  • Возможно ли использовать проверку формы?

По возможности избегайте JS, всегда выбирайте серверную часть.

  • Не следует ли мне давать какую-либо ссылку, которая открывает новое окно?

В старых браузерах нет поддержки «tab», поэтому, даже если вы укажете target=»_blank», он откроется поверх вашей текущей страницы. Я не напоминаю, когда, но браузеры S60 поддерживают вкладки, но это своего рода скрытая функция. Например, браузер N95 S60 3rd FP1 webkit не позволяет открывать ссылку в новом окне, но откроет новый тег, если используется _blank. А для перехода по «вкладкам» вам нужно нажать клавишу «5».

  • Обязательно ли использовать use em вместо px для определения размера шрифта?

Это полезно из соображений доступности, когда у вас есть скрипт для увеличения размера шрифта (те значки A- / A ). Но, как я уже говорил, в вопросе не следует определять семейство шрифтов.

Несколько советов:

= Большинство старых браузеров Blackberry — дерьмо, намного хуже, чем IE5-6. Итак, например, если вы хотите, чтобы в вашем основном контейнере было 5 пикселей по левому / правому краю, чтобы его можно было отображать как «центрированный», откажитесь от margin: 0 5px; и выберите border-left: 5px solid #same_bg_color;border-right: 5px solid #same_bg_color; Грустно, но это то, что сделал RIM :/

= Всегда старайтесь, чтобы ваш макет был максимально вертикальным. Не размещайте слишком много элементов в одной строке.

= ВСЕГДА устанавливайте навигационные якоря в середине текста. На старых устройствах навигация осуществляется с помощью перехода от привязки к привязке (или «псевдомашинки» в S60 ), поэтому, если вы дойдете до конца страницы, вам придется нажимать «Вверх» кучу раз. Избегайте этого, создав «Перейти к началу» или, что еще лучше, создайте такое же верхнее меню в нижнем колонтитуле.

= Большую часть времени не возитесь со шрифтами. цвет, размер, семейство в большинстве случаев не будут работать.

= Во всех этих советах рассматриваются «низкие» и некоторые ранние «средние» устройства следующего ранга «Мое личное устройство».:

Высокопроизводительные устройства: устройства, работающие под управлением следующих ОС: iOS, Android, WP7 , Bada, bbOS 6.0

Устройства среднего класса: устройства, предшествующие устройствам высокого класса. некоторые более поздние версии Symbian S40 и все S60, последняя версия Walkman от Sony / Ericsson до начала использования Android.

Бюджетные устройства: все остальные, включая WML, WAP1, BlackBerries, Windows Mobile (6.XX или более поздней версии), большинство Symbian S40 и старше, все остальное.

Комментарии:

1. @JitendraVyas np. не стесняйтесь задавать любые другие вопросы. Кстати, я просто напоминаю о вас.. Я в вашей мобильной группе LinkedIn; P

Ответ №2:

Если вам нужно убедиться, что ваш сайт будет работать на всех устройствах, возможно, вам захочется взглянуть на WALLhttp://wurfl.sourceforge.net/java/wall.php