1-й мобильный сайт

Question

Я отправляюсь на свой первый мобильный сайт. Его простой и должен быть достаточно простым, но у меня есть некоторые вопросы:

Пожалуйста, ответьте на любые или все q, вы можете!

1) Как сообщить сайту, чтобы он обслуживал лист «styles_mobile.css» для мобильного трафика? Для этого используется наиболее часто используемый код?

2) У меня есть индексная страница, и я создаю новый мобильный: «/index_mobile.htm» - это «неправильно». Должна ли мобильная страница быть ее собственной сущностью (например, /mobile.htm) или на основе существующей индексной страницы? Как перенаправить его? Как создать адрес «m.mywebsiteaddress.com»

3) В настоящее время я делаю изменения на своем ноутбуке, а затем, чтобы посмотреть, как они выглядят, мне нужно отправить их моему провайдеру, чтобы увидеть последствия моих изменений на моем iphone - как мне это сделать прямо с моего Mac?

4) Есть ли стандартная структура по элементам html? Например. стандартный документ имеет html, элементы головы и тела. В HTML5 теперь есть элементы заголовка, навигатора и нижнего колонтитула - есть ли какие-либо мобильные особенности, которые мне следует знать?

Это все на данный момент, но я могу видеть, как я добавляю к этому в течение следующих нескольких дней. Любые указатели или специальные рекомендации приветствуются

Answer 1

Мой опыт работы с мобильным телефоном заключается в том, что вам нужно думать об этом как о другом сайте. Различные html, разные css, разные js. Многие реализации, которые я видел, просто отмечают это по адресу m.site.com или просто www.site.com/m/. Ключевой элемент - подумать о них отдельно.

О вопросах:

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

2. Это относится к первой части моего ответа. Я обычно создаю каталог под названием /m, содержащий html, css и js под ним. Вы можете использовать http redirect на основе пользовательского агента для отправки трафика на каждый сайт. Что касается создания m.site.com, это зависит от того, что у вас есть, и вы можете создавать субдомены.

3. Вы можете публиковать непосредственно на своем Mac, в зависимости от того, какое программное обеспечение вы используете. На вашем Mac вы можете перейти к системным настройкам/совместному использованию и разрешить совместное использование веб-страниц. Это фактически активирует сервер Apache в вашем mac. Если вы поместите свои файлы в/Users/yourid/Sites/project, вы можете получить доступ к этому, нажав http://yourlocalip/~yourid/project. Я делаю это по памяти, чтобы я мог быть здесь или там.

4. Я бы предложил вам взглянуть на jquery + jquerymobile для вашего мобильного сайта. Это уберет много горя в этом процессе.

Answer 2

1) Как сказать сайт, чтобы служить «styles_mobile.css» лист на мобильный трафик? Для этого используется наиболее часто используемый код?

Вы можете использовать ссылку таблицы стилей, которые имеют медиазапросы в них:

<link rel="stylesheet" media="only screen and (max-width: 480px)" href="mobile.css"> 

2) У меня есть индексной страницы и творю новый мобильный одно: «/index_mobile.htm» является то, что «неправильно ». Должна ли мобильная страница быть ее собственной сущностью (например, /mobile.htm) или на основе существующей индексной страницы? Как перенаправить его? Как создать адрес «m.mywebsiteaddress.com»

Другой вариант состоит в том, чтобы обслуживать одну страницу (index.html) и просто начинать складывать элементы с плавающей точкой друг над другом по мере уменьшения области просмотра. Просмотрите http://www.html5rocks.com/en/ как на рабочем столе, так и на телефоне. Или, если ваш телефон не находится рядом с вами на данный момент, просто измените размер вашего браузера и посмотрите, как сайт начинает избавляться от нескольких столбцов и создает одностолбцовое представление. Они обслуживают только один файл (т. Е. Index.html) и не перенаправляют мобильных пользователей на мобильную страницу (то есть mobile.html).

3) В настоящее время я делаю изменения на своем ноутбуке, а затем, чтобы посмотреть, как они выглядят, мне нужно загрузить их моему провайдеру, чтобы увидеть эффекты моих изменений на моем iphone - как мне это сделать прямо из моего Mac?

Установите Apache Server на свой Mac, сделайте порт на соответствующих портах (порты 80 и 8080 IIRC), и вы сможете просматривать страницы на своем телефоне без постоянной загрузки файлов на ISP. URL будет (http: //xx.xxx.xx.xx) или что-то похожее на него.

4) Есть ли стандартная структура по элементам html? Например. стандартный документ имеет html, элементы головы и тела. В HTML5 теперь есть элементы заголовка, навигатора и нижнего колонтитула - есть ли какие-либо мобильные особенности, которые мне следует знать?

Нет, мобильные браузеры отображают те же HTML-теги, что и настольные браузеры. Единственное, что вам следует рассмотреть, это использование документа типа HTML5 (поддерживаемого мобильными браузерами), потому что у меня было много проблем с получением «мобильных» веб-сайтов с использованием доктринов XHTML или HTML4, чтобы хорошо выглядеть в мобильных браузерах даже при использовании метатега viewport так как сайты будут выглядеть очень сильно.

Вот, безусловно, лучший ресурс, который я наткнулся на разработку мобильных веб-сайтов.

http://www.html5rocks.com/en/mobile/mobifying/

Answer 3

Предыдущие два ответа были хороши, но я не полностью согласен с ними. Они слишком сложны.

1. Использовать мультимедийные запросы CSS, чтобы стиль вашего контента отличался для разных ширины экрана и/или ориентации.
2. Не беспокойтесь. Для удобства обслуживания вы должны просто создать один сайт, который по-разному оформлен медиа-запросами.
3. Снова, медиа-запросы. Вместо использования (max-device-width: 480px) для мобильных телефонов вы можете использовать (max-width) и разрабатывать/отлаживать непосредственно в браузере. В противном случае, если вы находитесь на OS X, симулятор iOS, который поставляется с Xcode, прекрасно работает (в том числе и iPads!)
4. Нет. Это обычная веб-страница.

В качестве примечания стороны, я не думаю, что вы должны принять совет по загрузке в другой таблице стилей для мобильных устройств. Загрузка другой таблицы стилей означает один дополнительный HTTP-запрос.Вы можете сохранить все стили ваших медиа-запросов в своей основной таблице стилей.

Answer 4

Чтобы использовать запросы средств массовой информации внутри «обычных» таблица стилей (т.е. рабочего стола таблицы стилей), выполните следующие действия:

/* desktop */ 
body { background: #FFFFFF; } 
header { width: 100%; } 

/* queries for devices with a max viewing area of 480px */ 
@media only screen and (max-width: 480px) { 
    body { background: #444444; } 
} 

выше CSS можно протестировать в браузере настольного компьютера. Например, поместите стили выше в тег стиля и просмотрите страницу в браузере шириной более 480 пикселей (будет выполняться максимизированное окно). Затем измените размер окна, пока не увидите изменение фона в темном цвете (что произойдет, когда ширина окна будет меньше 480 пикселей).