Использование Viewport для создания мобильной версии

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

Кто-то предложил мне использовать следующий код, к которому я не могу найти здесь много связанных вопросов:

<meta name="viewport" content="width=320, initial-scale=1">

Проблема в том, что я понятия не имею, как это реализовать, и знаю, что не могу просто конвертировать всю страницу.

То, что я прошу, это несколько указателей на то, как я могу достичь своей цели.


mobile viewport mobile-website mobile-webkit
person Jack Tyler    schedule 09.06.2011    source источник

Ответы (3)


arrow_upward
8
arrow_downward

http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/ знакомит вас с различными аспектами метатега области просмотра. Для оптимизации для различных размеров экрана вы, вероятно, захотите использовать <meta name="viewport" content="width=device-width"> в сочетании с медиа-запросами (также описанными в статье выше).

Обратите внимание, что в учебнике Element Fusion, на который вы ссылались, вместо запятых между значениями окна просмотра используются разделители с запятой — это неверно. Обязательно используйте запятые, как в вашем исходном примере :-)

person andreasbovens    schedule 12.06.2011

arrow_upward
4
arrow_downward

О viewport довольно мало сообщений. вы просто помещаете его между тегами заголовка. http://www.quirksmode.org/mobile/viewports2.html может помочь вам лучше идея. Не забудьте использовать мобильный тип документа вместе с окном просмотра.

Например

   <?xml version="1.0" encoding="utf-8"?>
   <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
   <meta name="viewport" content="user-scalable=yes, initial-scale=1.0, maximum-scale=2.0, width=device-width" />
   </head>
   <body>
   </body>
   </html>
person nLL    schedule 10.06.2011
comment
Спасибо за помощь, я нашел хороший учебник здесь, который помог. elementfusion.com/ Нужно было удалить мой вопрос! - person Jack Tyler; 10.06.2011
comment
Нет веской причины использовать мобильный тип документа вместе с окном просмотра. Вам должно быть достаточно просто использовать ‹!doctype html› - person andreasbovens; 13.06.2011
comment
Как вы пришли к этому @andreasbovens? Мобильный тип документа рекомендуется для мобильных веб-сайтов. ‹!doctype html› подойдет, если вы разрабатываете дизайн для мобильного сафари. - person nLL; 17.06.2011
comment
Это не стандарт W3C, вы напрасно ограничиваете объем HTML, который вы можете использовать, и вы должны обслуживать его как application/vnd.wap.xhtml+xml, который запускает драконовскую обработку ошибок в случае, если XML неправильно сформирован. Следовательно, ‹!doctype html› отлично справляется со своей задачей и работает в мобильных браузерах (Opera, Safari, Firefox, Android и т. д.). - person andreasbovens; 06.07.2011

arrow_upward
1
arrow_downward

Я использую iWeb 2011 со всеми его устаревшими конфигурациями и, конечно же, с относительной шириной 700 пикселей.

Я обнаружил, что это работает со всеми устройствами без каких-либо изменений:

<meta name="viewport content="width=700=content=width-device-width, initial-scale=1.0" />

Это мой сайт:

http://theevolutionofreason.com/The_Evolution_Of_Reason.html

Попробуйте это с приложением для изменения размера. Или загрузите приложение Google для изменения размера окна просмотра. (бесплатно), чтобы показать его визуальную совместимость со всеми устройствами

https://chrome.google.com/webstore/detail/viewport-resizer/kapnjjcfcncngkadhpmijlkblpibdcgm

Кроме того, проверьте «Источник элементов» моего веб-сайта.

Посетите:Обсуждение сообщества поддержки Apple «Конфигурация области просмотра iWeb» https://discussions.apple.com/message/29393840?ac_cid=op123456#29393840

person pedro santos    schedule 29.11.2015