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

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

6 голосов
/ 09 июня 2011

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

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

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

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

Я запрашиваю несколько советов о том, как мне достичь своей цели.

Ответы [ 3 ]

8 голосов
/ 13 июня 2011

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

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

4 голосов
/ 10 июня 2011

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

Например 

   <?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>
1 голос
/ 29 ноября 2015

Я использую 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

...