Използване на 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/ ви дава въведение в различните аспекти на мета тага viewport. За оптимизации в диапазон от размери на екрана вероятно искате да използвате <meta name="viewport" content="width=device-width"> в комбинация с медийни заявки (също разгледани в статията по-горе).

Обърнете внимание, че урокът за сливане на елементи, към който сте се свързали, използва разделители точка и запетая между стойностите на прозорците вместо запетаи - това не е правилно. Не забравяйте да използвате запетаи, както в първоначалния пример :-)

person andreasbovens    schedule 12.06.2011

arrow_upward
4
arrow_downward

Има доста малко публикации за viewport. просто го поставяте между етикетите на главата си. http://www.quirksmode.org/mobile/viewports2.html може да ви даде по-добро идея. Не забравяйте да използвате mobile doctype заедно с viewport.

Например

   <?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 заедно с viewport. Трябва да сте добри само с използването на ‹!doctype html› - person andreasbovens; 13.06.2011
comment
Как измисли това @andreasbovens? mobile doctype се препоръчва doctype за мобилни уеб сайтове. ‹!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 с всичките му остарели конфигурации и разбира се с относителна ширина от 700px.

Открих, че това работи с всички устройства, без да променя нищо:

<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 viewport“ https://discussions.apple.com/message/29393840?ac_cid=op123456#29393840

person pedro santos    schedule 29.11.2015