В чем разница между css inherit и initial?

1.1 CSS 2.2 vs CSS 2

The CSS community has gained significant experience with the CSS2
specification since it became a recommendation in 1998. Errors in the
CSS2 specification have subsequently been corrected in the first
revised edition in 2011, but new errata were necessary.

While many of the issues will be addressed by the upcoming CSS3
specifications, the current state of affairs hinders the
implementation and interoperability of CSS2. The CSS 2.2 specification
attempts to address this situation by:

  • Maintaining compatibility with those portions of CSS2 that are
    widely accepted and implemented.

  • Incorporating all published CSS2 errata.

  • Where implementations overwhelmingly differ from the CSS2
    specification, modifying the specification to be in accordance with
    generally accepted practice.

  • Removing CSS2 features which, by virtue of not having been
    implemented, have been rejected by the CSS community. CSS 2.2 aims to
    reflect what CSS features are reasonably widely implemented for HTML
    and XML languages in general (rather than only for a
    particular XML language, or only for HTML).

  • Removing CSS2 features that will be obsoleted by CSS3, thus
    encouraging adoption of the proposed CSS3 features in their place.

  • Adding a (very) small number of new
    property values, when implementation experience has shown that
    they are needed for implementing CSS2.

Thus, while it is not the case that a CSS2 style sheet is
necessarily forwards-compatible with CSS 2.2, it is the case that a
style sheet restricting itself to CSS 2.2 features is more likely to
find a compliant user agent today and to preserve forwards
compatibility in the future. While breaking forward compatibility is
not desirable, we believe the advantages to the revisions in CSS 2.2
are worthwhile.

CSS 2.2 is derived from and is intended to replace
CSS 2.1 and CSS2. Some parts of CSS2 are unchanged in
CSS 2.2, some parts have been
altered, and some parts removed. The removed portions may be used in a
future CSS3 specification. Future specs should refer to CSS 2.2
(unless they need features from CSS2 which have been dropped in
CSS 2.2, and then they should only reference CSS2 for those
features, or preferably reference such feature(s) in the respective
CSS3 Module that includes those feature(s)).

1.2 Reading the specification

This section is non-normative.

This specification has been written with two types of readers in
mind: CSS authors and CSS implementors. We hope the specification will
provide authors with the tools they need to write efficient,
attractive, and accessible documents, without overexposing them to
CSS’s implementation details. Implementors, however, should find all
they need to build .

The specification begins with a general presentation of CSS and
becomes more and more technical and specific towards the end. For
quick access to information, a general table of contents,
specific tables of contents at the beginning of each section,
and an index provide easy navigation, in both the electronic
and printed versions.

The specification has been written with two modes of presentation
in mind: electronic and printed. Although the two presentations will
no doubt be similar, readers will find some differences. For example,
links will not work in the printed version (obviously), and page
numbers will not appear in the electronic version. In case of a
discrepancy, the electronic version is considered the authoritative
version of the document.

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

Changing the Viewport Width and Height

Typically, you set the viewport width to match your web content. This is the single most important optimization that you can do for iOS—make sure your webpage looks good the first time it is displayed on iOS.

The majority of webpages fit nicely in the visible area with the viewport width set to pixels in portrait orientation, as shown in Figure 3-4. If Safari on iOS did not set the viewport width to pixels, then only the upper-left corner of the webpage, shown in gray, would be displayed. However, this default doesn’t work for all webpages, so you’ll want to use the meta tag if your webpage is different. See for more on .

Figure 3-4  Comparison of 320 and 980 viewport widths

If your webpage is narrower than the default width, as shown on the left in Figure 3-5, then set the viewport width to the width of your webpage, as shown on the right in Figure 3-5. To do this, add the following to your HTML file inside the block, replacing with the width of your webpage:

Figure 3-5  Webpage is too narrow for default settings

It is particularly important to change the viewport width for web applications designed for devices with smaller screens such as iPhone and iPod touch. Figure 3-6 shows the effect of setting the viewport width to . Read for more web application tips.

Figure 3-6  Web application page is too small for default settings

FAQ

—What do you mean by cross-browser?
—I took all properties and combined ’em with their initial values, so it works in every browser, because its essentially , but expanded.

—What do you mean by thoughtful?
—There are several caveats about as it is now, and I have built this package with those caveats in mind.

—What are the caveats?
— 1) Initial values of , and depend on the browser
— 2) 14 properties depend on , which is a reference to the property, which varies from browser to browser (hence prev point), and these properties are: , , , , , , , , , , , , , .
— 3) Initial value of is either if the browser supports it, or otherwise.

—Is this all?
—It depends. If you want military grade CSS cascade defense, then no, otherwise hold on. Thing is that according to the spec, doesn’t apply initial values to and .

—I’ve never heard of .
—To be honest, me neither. It is quite complicated and I don’t know why one would need it. But as long as this property is not inherited it’s safe to leave it untouched.

—What’s up with ?
—Good question. Firstly, deals with the problem. Secondly, it is inheritable, so it will definitely affect your components. It can have a negative impact on your components’ isolation, so it also doesn’t make sense to allow your components to inherit from the outside world. Your components should be optimised for anyway, and wont make ’em automatically look good in arabic or hebrew. To fix problem properly you would need a solution like rtlcss, because you not only want to change direction, but you want to adjust , , , , etc.

—Is this all?
—yes, thanks for your attention.

Варианты подключения медиазапросов

Подключение медиазапросов с использованием тега

Вы можете подключать различные стили для различных устройств, используя HTML тег (определяет связь между документом и внешним ресурсом) и его атрибута media:

media = "mediatype and | not | only (media function)" rel = "stylesheet" href = "stylesheet.css">

Обратите внимание, что в этом случае используется в качестве значения атрибута media тот же синтаксис, что и при использовании правила @media

Подключение медиазапросов с использованием тега

Вы можете подключать различные стили для различных устройств, используя HTML тег , который сообщает браузеру, что внутри него содержится код CSS:

1. Используя атрибут media HTML тега :

 "mediatype and | not | only (media function)">
	...код CSS 

	
2. Используя CSS правило @media внутри HTML тега :


	@media not | only mediatype and (media function) {
	  ...код CSS
	}

Обратите внимание, что при использовании атрибута media тега используется тот же синтаксис, что и при использовании правила @media

Подключение медиазапросов с использованием правила @import

Кроме того, Вы можете использовать правило @import, которое позволяет копировать стили из других CSS файлов:

@import url("main.css") (min-width:481px) and (max-width:768px); /* импортируем содержимое файла css, который предназначается для устройств с разрешением экрана, находящегося в диапозоне от 481 пикселей до 768 пикселей */
@import url("print.css") print; /* импортируем содержимое файла css, который предназначается для печатных страниц и для режима предварительного просмотра печати */
@import url("protv.css") projection, tv; /* импортируем содержимое файла css, который предназначается для устройств проекционного типа и телевизионного типа */
@import url("file.css") screen and (orientation:landscape); /* импортируем содержимое файла css, который предназначается для экранов компьютера И альбомной ориентации.*/

Учтите тот факт, что правило @import увеличивает число соединений с сервером, поскольку файл, на который вы ссылаетесь необходимо скачать и проанализировать (создается дополнительный запрос к серверу). Исходя из правил и рекомендаций PageSpeed Insight (), связанных с оптимизацией страниц, рекомендуется избегать применения правила @import.

Вы можете подключать различные стили для различных устройств, используя HTML тег (определяет связь между документом и внешним ресурсом) и его атрибута media:

media = "mediatype and | not | only (media function)" rel = "stylesheet" href = "stylesheet.css">

Вы можете подключать различные стили для различных устройств, используя HTML тег (сообщает браузеру, что внутри него содержится код CSS):

1. Используя атрибут media HTML тега :

 "mediatype and | not | only (media function)">
	...код CSS 

	
2. Используя CSS правило @media внутри HTML тега :


	@media not | only mediatype and (media function) {
	  ...код CSS
	}

Кроме того, Вы можете использовать правило @import, которое позволяет копировать стили из других CSS файлов:

@import url("main.css") (min-width:481px) and (max-width:768px); /* импортируем содержимое файла css, который предназначается для устройств с разрешением экрана, находящегося в диапозоне от 481 пикселей до 768 пикселей */
@import url("print.css") print; /* импортируем содержимое файла css, который предназначается для печатных страниц и для режима предварительного просмотра печати */
@import url("protv.css") projection, tv; /* импортируем содержимое файла css, который предназначается для устройств проекционного типа и телевизионного типа */
@import url("file.css") screen and (orientation:landscape); /* импортируем содержимое файла css, который предназначается для экранов компьютера И альбомной ориентации.*/

Учтите тот факт, что правило @import увеличивает число соединений с сервером, поскольку файл, на который вы ссылаетесь необходимо скачать и проанализировать (создается дополнительный запрос к серверу). Исходя из правил и рекомендаций PageSpeed Insight (), связанных с оптимизацией страниц, рекомендуется избегать применения правила @import.

Метатег Viewport

c http-equiv=»Content-Type» content=»text/html;charset=UTF-8″>lass=»date»>Последнее обновление: 03.05.2016

Прежде всего рассмотрим один из ключевых моментов применения адаптивного дизайна — метатег viewport (по сути с этого тега и начивается адаптиный дизайн).
Пусть для начала у нас есть следующая веб-страница:

Обычная веб-страница

Обычная веб-страница

Это стандартная веб-страница, которая в обычном браузере будет выглядеть следующим образом:

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

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

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

Вся видимая область на экране браузера описывается понятием Viewport. По сути viewport представляет область, в которую веб-браузер
пытается «впихнуть» веб-страницу. Например, браузер Safari на iPone и iPod определяет ширину viewport по умолчанию равной 980 пикселям. То есть, получив
страницу и вписав в viewport с шириной 980 пикселей, браузер сжимает ее до размеров мобильного устройства. Например, если ширина экрана смартфона составляет
320 пикселей, то до этого размера потом будет сжата страница. И ко всем элементам страницы будет применен коэффициент масштабирования, равный 320/980.

Почему в данном случае используется именно 980 пикселей, а, скажем, не реальный размер экрана? Все дело в том, что по умолчанию браузер считает, что каждая веб-страница предназначена для десктопов. А обычной шириной десктопного сайта можно считать 980 пикселей.

При этом для каждого браузера устанавливается своя ширина области viewport, необязательно 980 пикселей. Другие браузеры могут поддерживать в
качестве начальной ширины другие значения. Но они также будут выполнять масштабирование.

Чтобы избежать подобной не очень приятной картины, следует использовать метатег viewport. Он имеет следующее определение:

В атрибуте content мета-тега мы можем определить следующие параметры:

Параметр

Значения

Описание

width

Принимает целочисленное значение в пикселях или значение

Устанавливает ширину области viewport

height

Принимает целочисленное значение в пикселях или значение

Устанавливает высоту области viewport

initial-scale

Число с плавающей точкой от 0.1 и выше

Задает коэффициент масштабирования начального размера viewport.
Значение 1.0 задает отсутствие масштабирования

user-scalable

no/yes

Указывает, может ли пользователь с помощью жестов масштабировать страницу

minimum-scale

Число с плавающей точкой от 0.1 и выше

Задает минимальный масштаб размера viewport.
Значение 1.0 задает отсутствие масштабирования

maximum-scale

Число с плавающей точкой от 0.1 и выше

Задает максимальный масштаб размера viewport.
Значение 1.0 задает отсутствие масштабирования

Теперь изменим предыдущий пример веб-страницу, использовав метатег:

Обычная веб-страница

Обычная веб-страница

Веб-страничка определенно выглядит лучше благодаря использованию метатега viewport. Используя параметр
мы говорим веб-браузеру, что в качестве начальной ширины области viewport надо считать не 980 пикселей или какое-то другое число,
а непосредственную ширину экрана устройства. Поэтому затем веб-браузер не будет проводить никакого масштабирования, так как у нас ширина
viewport и ширина одинаковы.

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

My browser features

CSS3

  • flexbox
  • grid layout
  • grid layout (old)
  • position: sticky
  • regions
  • @supports
  • will-change
  • pointer events
  • calc()
  • viewport units
  • hover media query
  • pointer media query
  • background blend mode
  • background-size: cover
  • object-fit
  • font ligatures
  • appearance
  • filters
  • masks
  • scroll snap points
  • shapes
  • hyphens

HTML5 / JS

  • flash
  • video
  • webgl
  • canvas
  • srcset
  • inline SVG
  • webp
  • jpegxr
  • geolocation
  • matchmedia()
  • websockets
  • localstorage
  • application cache
  • webworkers
  • serviceworker
  • SVG filters
  • emoji
  • touch events
  • fullscreen API
  • file API
  • gamepad API
  • vibration API
  • speech recognition API
  • battery API
  • ambient light API

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

Size Content to The Viewport

Users are used to scroll websites vertically on both desktop and mobile
devices — but not horizontally!

So, if the user is forced to scroll horizontally, or zoom out, to see the
whole web page it results in a poor user experience.

Some additional rules to follow:

1. Do NOT use large fixed width elements — For example, if
an image is displayed at a width wider than the viewport it can cause the
viewport to scroll horizontally. Remember to adjust this content to fit within
the width of the viewport.

2. Do NOT let the content rely on a particular viewport width to
render well — Since screen dimensions and width in CSS pixels vary
widely between devices, content should not rely on a particular viewport width
to render well.

3. Use CSS media queries to apply different styling for small and
large screens — Setting large absolute CSS widths for page elements
will cause the element to be too wide for the viewport on a smaller device.
Instead, consider using relative width values, such as width: 100%. Also, be
careful of using large absolute positioning values. It may cause the element to
fall outside the viewport on small devices.

Media-screen примеры

Если кто-то думает, что это очень сложно и непостижимо, то сейчас ваше мнение изменится и вы на моем примере убедитесь в том, что не так страшен черт, как его малюют. Итак, у нас есть страница, на которой есть шапка с картинкой и блок с контентом черного цвета на желтом фоне.


Для начала в head нужно добавить такую строчку:

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

CSS код сейчас такой:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
#header{
	height120px;
	positionrelative
	padding5px;
}
#content{
	background#fff000;
	padding5px;
}
p {
    padding 5px;
}	
 .txt {
    font 65px Verdana bold;
    position relative;
    top 16px;
    color #fff;
    left 80px;
   }
img{
     margin5px;
}

Ставим пред собой задачу на экранах шириной меньше 1000 px изменять цвет текста, фона, покрасить шапку, сместить значок вправо, а слева от него будет появляться надпись. И выглядеть это будет вот так:

То есть мы произведем кардинальные изменения на странице средствами Media screen CSS. Для этого пишем те самые медиа-запросы, которые будут определять ширину экрана девайса и выдавать тот или иной вид.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 @media screen and (max-width 1000px) {
#header {
	background#543567; /* Красим шапку */
	}
   }
 @media screen and (min-width 1000px) {
 .txt {
      font 25px Verdana bold; /* Показываем заголовок */
      positionrelative;
      top; 15px;
      left 30px;
      displaynone;	
	}
   }
@media screen and (max-width 1000px) {
#content {
	 background#657493; /* Меняем цвет текста и фона содержимого */
	 color#fff;			
	}
   }
@media screen and (max-width 1000px) {
    img {
	floatright; /* Смещаем логотип вправо */			
	}
   }

Более подробно можно посмотреть код демонстрационной страницы и самостоятельно разобраться что к чему.

Изменяйте ширину окна браузера, чтобы увидеть изменения. В Хроме есть функция просмотра на разных устройствах. Клавиша F12 Фактически в Media screen CSS мы создаем новые правила, которые вступят в силу только при определенных условиях. В данном случае, если дисплей будет меньше или равен 1000 px. Если будет больше, то ничего меняться не будет.

Надеюсь, что вы уловили мою мысль, которую я хотел донести до вас касательно медиа-запросов. Таким образом можно создавать отдельные таблицы стилей CSS специально для определенных устройств и даже для печати. Такой подход будет гораздо правильней, чем прописывать все стили для каждого устройства в одном файле. Подключается это вот так:

1
link rel= "stylesheet" href= "device.css" media= "only screen and (max-device width:640px)">

Можно так же взять готовые стили из Bootstrap CSS и подогнать под свой дизайн.

Что такое viewport?

Viewport — это видимая пользователю область веб-страницы. Т.е. это то, что может увидеть пользователь, не прибегая к прокрутке.

Размеры этой области определяются размером экрана устройства. Самую маленькую область просмотра (viewport) имеют смартфоны, размеры экранов которых колеблются от 4″ до 6″. А самую большую — мониторы компьютеров, размеры диагоналей которых могут превышать 24″.

До появления смартфонов и планшетов, веб-страницы в основном просматривались на экранах компьютерах. Viewport этих экранов хоть и отличался, но не настолько сильно. Для создания сайтов до появления мобильных устройств в основном использовалась фиксированная или резиновая (гибкая) разметка.

После того, как появились смартфоны и планшеты, viewport одних устройств стал сильно отличаться от viewport других устройств. Это привило к тому, что сайты, созданные для компьютеров, стало невозможно или затруднительно просматривать на смартфонах. Выходом из этой ситуации послужило появление адаптивной разметки. Адаптивная — это такая разметка, которую можно настроить под различные размеры экранов. Осуществляется создание адаптивной разметки с помощью медиа запросов, которые появились в спецификации CSS3 и в настоящий момент поддерживаются всеми основными браузерами.

Но и у адаптивной разметки появились проблемы после того как появились смартфоны с высокой плотностью пикселей и, следовательно с высоким разрешением. Чтобы более детально разобраться в этой ситуации рассмотрим следующий пример, в котором сравним 2 устройства.

Первое устройство — это смартфон Apple iPhone 3 (диагональ 3.5″). Данный телефон не имеет высокую плотность пикселей. У данной модели она составляет 163ppi (меньше 200ppi). Физическое разрешение данного смартфона составляет 320×480. Такое разрешение соответствует диагонали, если его сопоставить с разрешением мониторов настольных устройств (компьютеров). Т.е. на веб-странице этого смартфона, текст, выполненный размером 16px, будет также хорошо читаемым как на мониторе компьютера.

Второе устройство — это смартфон Apple iPhone 4. Он имеет диагональ такую же как у смартфона Apple iPhone 3, т.е. 3.5″. Но отличается от него тем, что имеет высокую плотность пикселей (326ppi). Следовательно, более высокое разрешение — 640×960 при тех же размерах экрана. Это приведёт к тому, что тот же самый текст и остальные объекты веб-страницы будут выглядеть в нём при тех же условиях в 2 раза меньше. Таким образом, текст будет реально выглядеть на 8px. Такая страница будет уже трудночитаемой. Чтобы сделать эту страницу пригодной для чтения, её представление необходимо увеличить в горизонтальном и вертикальном направлении в 2 раза (отмасштабировать).

How Safari Infers the Width, Height, and Initial Scale

If you set only some of the properties, then Safari on iOS infers the values of the other properties with the goal of fitting the webpage in the visible area. For example, if just the initial scale is set, then the width and height are inferred. Similarly, if just the width is set, then the height and initial scale are inferred, and so on. If the inferred values do not work for your webpage, then set more viewport properties.

Since any of the width, height, and initial scale may be inferred by Safari on iOS, the viewport may resize when the user changes orientation. For example, when the user changes from portrait to landscape orientation by rotating the device, the viewport width may expand. This is the only situation where a user action might resize the viewport, changing the layout on iOS.

Specifically, the goal of Safari on iOS is to fit the webpage in the visible area when completely zoomed out by maintaining a ratio equivalent to the ratio of the visible area in either orientation. This is best illustrated by setting the viewport properties independently, and observing the effect on the other viewport properties. The following series of examples shows the same web content with different viewport settings.

Figure 3-7 shows a typical webpage displayed with the default settings where the viewport width is 980 and no initial scale is set.

Figure 3-7  Default width and initial scale

Figure 3-8 shows the same webpage when the initial scale is set to 1.0 on iPhone. Safari on iOS infers the width and height to fit the webpage in the visible area. The viewport width is set to in portrait orientation and in landscape orientation.

Figure 3-8  Default width with initial scale set to 1.0

Similarly, if you specify only the viewport width, the height and initial scale are inferred. Figure 3-9 shows the rendering of the same webpage when the viewport width is set to 320 on iPhone. Notice that the portrait orientation is rendered in the same way as in , but the landscape orientation maintains a width equal to , which changes the initial scale and has the effect of zooming in when the user changes to landscape orientation.

Figure 3-9  Width set to 320 with default initial scale

You can also set the viewport width to be smaller than the visible area with a minimum value of 200 pixels. Figure 3-10 shows the same webpage when the viewport width is set to 200 pixels on iPhone. Safari on iOS infers the height and initial scale, which has the effect of zooming in when the webpage is first rendered.

Figure 3-10  Width set to 200 with default initial scale

Finally, Figure 3-11 shows the same webpage when both the width and initial scale are set on iPhone. Safari on iOS infers the height by maintaining a ratio equivalent to the ratio of the visible area in either orientation. Therefore, if the width is set to 980 and the initial scale is set to 1.0 on iPhone, the height is set to 1091 in portrait and 425 in landscape orientation.

Figure 3-11  Width set to 980 and initial scale set to 1.0

Ссылка на основную публикацию