Что такое ViewPort
Мобильные браузеры размещают страницу в виртуальное окно (ViewPort). Обычно виртуальное окно (ViewPort) шире, чем экран, так что каждой веб -странице не нужно сжимать каждую веб -страницу в очень маленькое окно (это разрушит макет веб -страницы, которая не оптимизирована для мобильных браузеров). Пользователи могут видеть разные части веб -страницы посредством панорамирования и масштабирования. Мобильная версия Safari Browser недавно представила Meta Tag of ViewPort, которая позволяет разработчикам веб -разработчиков контролировать размер и масштаб ViewPort, а другие мобильные браузеры также в основном поддерживают его.
Основы Viewport
Метеги для просмотра точки зрения общеиспользуемой страницы, оптимизированной для мобильных веб -страниц, примерно следующим образом:
<meta name = viewport content = width = ширина устройства, начальная шкала = 1, максимальная масштаба = 1 ″>
Ширина: управляет размером видового порта, который может быть указан, если 600 или специальное значение, такое как ширина устройства, является шириной устройства (единицы пикселей CSS при масштабировании до 100%.
Высота: соответствует ширине, укажите высоту.
Начальное масштаб: начальное масштабирование, то есть коэффициент масштабирования, когда страница загружается в первый раз.
Максимальная масштаба: максимальная шкала, которая позволяет пользователю масштабироваться.
Минимальное масштаб: минимальная шкала, которая позволяет пользователю масштабироваться.
Пользовательский масштаб: может ли пользователь вручную масштабировать
Некоторые вопросы о ViewPort
ViewPort - это не просто уникальный атрибут на iOS, но и Viewport на Android и WinPhone. Проблема, которую они хотят решить, та же самая, то есть игнорировать реальное разрешение устройства и непосредственно через DPI, сбросить разрешение между физическим размером и браузером, что не имеет ничего общего с разрешением устройства. Например, вы можете получить iPhone3 GS с 3,5-дюймовым 320 * 480, iPhone4 с 3,5-дюймовым 640 * 960, iPhone4 с 9,7-дюймовым 1024 * 768 и iPad2 с различными разрешениями и физическими размерами, вы можете установить ViewPort, чтобы они имели одинаковое разрешение в брузере. Например, ваш веб -сайт шириной 800 %, вы можете установить ширину = 800 Viewport, чтобы ваш сайт отобразил ваш сайт на этих трех различных устройствах только на полном экране.
Я считаю, что каждый студент, у которого есть небольшое понимание просмотра, уже должен был понять вышеупомянутые знания. Это не тот момент, о чем я хочу поговорить сегодня. Я хочу проиллюстрировать некоторые различия в производительности просмотра в iOS и Android.
При поиске онлайн -знаний о ViewPort, это в основном вся следующая информация:
<meta name = viewport content = width = ширина устройства, начальная масштаба = 1,0, максимальная масштаба = 1,0, минимальная шкала = 1,0, пользовательский шкалера = нет />
Этот код означает, что ширина просмотра равна реальному разрешению на физическом устройстве и не позволяет пользователю масштабироваться. Вот как устанавливаются основные веб -приложения в Yidu. Его функция состоит в том, чтобы намеренно отказаться от видового порта, а не масштабировать страницу. Таким образом, DPI должен быть таким же, как реальное разрешение на устройстве. Без какого -либо масштабирования веб -страница будет выглядеть выше и более деликатной. Студенты, которые играют в PS, должны знать, чем станет, когда вы увеличиваете картину 1000 * 1000 непосредственно до 500 * 500 баллов, верно? Искажение картины не должно быть сбежато.
Но приложение, которое я хочу сделать, это противоположное, и оно должно использовать ViewPort и Zoom. Независимо от того, что такое реальное разрешение или каков физический размер, я надеюсь, что в браузере будет единое решение, и что пользователю не будет разрешено масштабировать. Устройства, которые я использовал для тестирования: iPhone4, iPad2, HTC G11, Aquos Phone (Android System), Asus Android Pad, Dell Winphone и я столкнулись с следующими проблемами:
1) Если ViewPort установлен без отображения, то ширина по умолчанию составляет 980. Если все элементы страницы составляют менее 980, то ширина составляет 980. Если ширина страницы превышает 980, то ширина равна максимальной ширине. Короче говоря, вся страница может отображаться слева направо по умолчанию. Например, если вы установите ViewPort, просто установите пользовательский scalbable = no, например, <meta name = viewport content = user-scalbable = no />, тогда ширина под iOS все равно будет отображаться в 980 (то есть, он будет масштабирован по DPI по умолчанию), но он больше не будет масштабирован под Android и Win Phone, а резолюция Browser и резолюция.
2) Для устройств iOS настройка ширина может вступить в силу, но для Android ширина настройки не вступит в силу. Коэффициент масштабирования DPI автоматически рассчитывается по установленной вами ширине и установленным вами реальным разрешением. Однако в Android вы устанавливаете ширину недействительны. То, что вы можете установить,-это специальная поля целевой плотности, то есть есть три переменных: ширина браузера, настоящая ширина устройства и DPI. Давайте просто используем формулу, чтобы выразить отношения между ними (не реальными отношениями, просто используйте ее для краткого объяснения) устройства Реальная ширина * dpi = ширина браузера, здесь три переменных, настоящая ширина устройства - это известное значение, которое мы не можем работать, и мы можем установить одну из других переменных, чтобы повлиять на другую. В iOS мы можем изменить ширину браузера, автоматически генерируется DPI, а в Android мы можем изменить DPI, а ширина браузера создается автоматически. Для Android, независимо от того, как мы устанавливаем ширину, это не повлияет на ширину браузера.
PS: Здесь я расскажу о другой странной проблеме: в G11's HTC (у меня есть только этот один для телефона HTC, и никаких других тестов), если DPI установлен без ширины, пользовательский scalbable = no не вступает в силу, то есть: <meta name = viewport content = targetdpi = 300, пользовательский составлений = нет />, это не может предотвратить пользователи от Zoom, на экране. Нам нужно установить значение ширины, отображаемое. Хотя это значение не оказывает какого-либо влияния на разрешение экрана браузера при Android (оно все равно будет влиять на iOS), нам все равно нужно установить его, и это значение должно быть больше 320. Если оно меньше или равно 320, пользовательский шкалевый = NO не может быть эффективным. Эта проблема появляется только на телефоне HTC G11, и на Aquos Phone нет никакой проблемы. Совместим с Android действительно головная боль @_ @. Я не знаю, сколько ошибок будет в будущем. На WinPhone результат еще более странный: я установил значение, превышающее 480 для ширины видового порта, и пользовательский масштаб = нет. Если значение менее 480, пользовательская масштаба = нет вступит в силу. Но независимо от того, какое значение я установил ширину просмотра, он не оказывает влияния на реальную ширину, отображаемую WinPhone, и не оказывает эффект через Target-DensityDPI. Установите ширину, если она меньше 480, экран будет увеличиваться, но шкала сокращения полностью отличается от того, что я ожидал. Я не знаю, в каком правиле он увеличен. Я не знаю, является ли это проблемой с WinPhone или проблемой с реализацией Dell.
3) Эта статья должна быть напрямую связана с предыдущей статьей: когда устройство iOS является горизонтальным и вертикальным, оно автоматически отрегулирует DPI. Будь то горизонтальный или вертикальный, он может гарантировать, что ширина браузера равна значению, установленному в точке зрения. Следовательно, когда горизонтальные и вертикальные экраны являются горизонтальными и вертикальными экранами, размер содержания, отображаемого на странице, автоматически масштабируется и изменяется. Когда телефоны Android являются горизонтальными и вертикальными экранами, DPI не будет изменен, а когда горизонтальные и вертикальные экраны, веб -страница не будет увеличена. По этой причине iOS может гарантировать, что на горизонтальных и вертикальных страницах не генерируется полоса прокрутки, и полный экран отображается, но Android не может гарантировать это. Если горизонтальные и вертикальные экраны не могут быть заполнены, и наоборот.
4) Для устройств iOS, если определяется дисплей ширины, и самая широкая позиция страницы превышает ширину, ширина недействительна и все еще будет отображаться при самой широкой ширине (там не будет полосы прокрутки). Но в это время возникнет очень странная проблема. После того, как вы переключите горизонтальный и вертикальный экран вашего телефона, вы обнаружите, что ваша страница автоматически увеличивается и появляется полоса прокрутки, но на самом деле увеличенная ширина не имеет ничего общего с установленной вами шириной. Чтобы это не произошло, вам необходимо установить ширину ширины, чтобы быть больше, чем самая широкая часть страницы, или то же самое.