Css iphone screen size

Css iphone screen size

iPhone 13 Pro

iPhone 13 Pro is a phone powered by iOS OS and released by Apple on September 24, 2021.

Get the Blisk app to test the cross-browser compatibility and responsive design on iPhone 13 Pro. This phone is ready to use standalone or simultaneously with lots of other popular devices.

Viewport Size:
390px × 844px

Screen Size:
1170px × 2532px

Device Pixel Ratio:
3

Overview and Dimensions

iPhone 13 Pro was released by Apple on September 24, 2021 and is powered by iOS OS. By default, the device is shipped with a web browser — Safari for iOS. Device dimensions are 71.5 × 146.7 × 7.7 millimeters (2.81 × 5.78 × 0.3 inches) 1 . The device weighs 204 g.

iPhone 13 Pro has a large-sized Super Retina XDR OLED display with a 6.1-inch screen (90.2 cm 2 , 19.5:9 aspect ratio), and an approximate 86% screen-to-body ratio. The display is a touch screen, meaning that it supports touch events — interactions using a finger or stylus.

Screen size, Viewport, CSS Pixel Ratio

iPhone 13 Pro has a 6.1-inch screen with a screen size (resolution): 1170px × 2532px, 390px × 844px viewport 1 , and a CSS Pixel Ratio of 3.

Screen size (resolution) is the number of physical pixels present on a screen.

Viewport or Viewport size is the number of software pixels (CSS pixels) present on a screen. Usually, viewport size displays as viewport width in pixels to viewport height in pixels.

Device Pixel Ratio (DPR) or CSS Pixel Ratio is the ratio between the physical pixels (screen size or resolution) and CSS pixels (viewport). Depending on device specification, one CSS pixel can equal one or mode physical pixels. Modern devices have screens with high pixel density resulting in the difference between screen size (resolution) and viewport.

Key points for development and testing on iPhone 13 Pro

Before you start web development or testing, check that the web application supports a responsive viewport by using a viewport meta tag: &ltmeta name=»viewport» content=»width=device-width»> .
You can inspect this tag in the head section of an HTML document on iPhone 13 Pro right in the Blisk app. If this viewport tag is missing, the web application will not be responsive and will overflow the screen, hiding the content from users and leading to a bad user experience.

The form factor of the device represents its primary orientation as a portrait. Landscape orientation is popular on iPhone 13 Pro as well and should be seriously considered when you develop or test web applications on any mobile.

You also need to consider that the users will manipulate your web application on iPhone 13 Pro with a finger and stylus because this device has a touch screen that supports touch events. It is important to remember, that users may interact with multiple fingers (multi-touch) and gestures: single tap, multi-tap, swipe, pinch, stretch, zoom, etc. The users are highly likely to use gestures on small touch screens because of seamless interaction and great user experience.

CSS Media Query

Use the CSS Media Queries below to apply custom CSS properties for iPhone 13 Pro and devices with the same screens:

iPhone 13 Pro Media Query for min-width: iPhone 13 Pro Media Query for min-height: iPhone 13 Pro Media Query for landscape orientation: iPhone 13 Pro Media Query for portrait orientation: iPhone 13 Pro Media Query for device pixel ratio:

Launch iPhone 13 Pro in Blisk

iPhone 13 Pro is ready to use in the Blisk app, where you can develop web applications and test cross-browser compatibility, use this phone as a standalone device or simultaneously with other devices. Learn more.

1. Download the latest version.
2. Launch the Developer Mode from the Toolbar (screenshot below).
3. Click Device Manager (screenshot below).
4. Select iPhone 13 Pro from the list.
5. Click Launch Devices.

Источник

iPhone X / 8 / 8 Plus CSS media queries

What are the CSS media queries corresponding to Apple’s new devices ? I need to set the body ‘s background-color to change the X’s safe area background color.

5 Answers 5

iPhone X

iPhone 8

iPhone 8 Plus

iPhone 6+/6s+/7+/8+ share the same sizes, while the iPhone 7/8 also do.

Looking for a specific orientation ?

Portrait

Add the following rule:

Landscape

Add the following rule:

Here are some of the following media queries for iPhones. Here is the ref link https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

I noticed that the answers here are using: device-width , device-height , min-device-width , min-device-height , max-device-width , max-device-height .

Please refrain from using them since they are deprecated. see MDN for reference. Instead use the regular min-width , max-width and so on. For extra assurance, you can set the min and max to the same px amount. For example:

iPhone X

You may also notice that I am using 635px for height. Try it yourself the window height is actually 635px. run iOS simulator for iPhone X and in Safari Web inspector do window.innerHeight . Here are a few useful links on this subject:

It seems that the most accurate (and seamless) method of adding the padding for iPhone X/8 using env().

Here’s a link describing this:

If your page is missing meta[@name=»viewport»] element within its DOM, then the following could be used to detect a mobile device:

If you want to avoid false-positives with desktops that just magically have their viewport set to 980px like all the mobile browsers do, then a device-width test could also be added into the mix:

Источник

Css iphone screen size

Apple iPhone 12 will be launched in October 2020.
Apple iPhone 12 have iOS 14.1

Screen Dimensions

Apple iPhone 12 screen size is 6.1 inch with

86.0% body ratio of actual device size. Physical dimensions for Apple iPhone 12 device is 5.78 x 2.81 x 0.29 INCH or ( 146.7 x 71.5 x 7.4 MM).

Displaying of Units are in this order «Height x Width x Thickness»

Screen Pixel Density and CSS Pixel Ratio

«Pixel» is smallest unit/element of any display.

The total number of pixels that fit into an inch is referred to as «Screen Density» or «Pixel Density» and it measured as «Pixels Per Inch».
Pixel Desnsity have limits to display Pixels Per Inch depends on different screen sizes. When number of pixels per inch increases than it’s screen-size limit, the Display resolution will increase but actual device width/height in pixels remain same. Actual device pixels are known as Device Independent Pixels or CSS Pixel Ratio.

Apple iPhone 12 resolution is 1170 x 2532 PX with

460 pixel desnsity.
Apple iPhone 12 viewport size is 390 x 844 PX with

153 actual pixel density, which means it have 3 xxhdpi display pixel density.

Screen Resolution and Viewport

The sum of pixels which are displaying on a device is called as «Screen Resolution». and sum of actual pixels of any device is reffered to as «Viewport».

Apple iPhone 12 have 6.1″ physical screen size and its resolution is about 1170 x 2532 Pixels with approximately 460 PPI pixel density. Apple iPhone 12 has viewport size 390 x 844 Pixels and its pixel ratio is about 3 .

For better understanding screen actual sizes, viewport sizes, display resolution and about their density click here.

CSS Media Queries

Apple iPhone 12 Media Queries (In terms of Mobile only)

Apple iPhone 12 Min-Width Media Queries

Apple iPhone 12 Min-Height Media Queries

Apple iPhone 12 Landscape Media Queries

Apple iPhone 12 Portrait Media Queries

Apple iPhone 12 Retina Media Queries

Retina is actually based upon device pixel ratio. Devices mostly have 2x or 3x display so you can use general retina media queries to display high resolution content on all kind of devices. Retina 2x and Retina 3x media queries given below:

Retina 2x Media Query

Retina 3x Media Query

Apple iPhone 12 Specifications

• Launch Date October 2020
• iOS 14.1
• Physical Screen Size 6.1 INCH
• Resolution 1170 x 2532 PX
• Viewport Size 390 x 844 PX
• Pixel Density 460 PPI
• Device-Independent Pixels 153 PPI
• Pixel Ratio 3 xxhdpi
• Width 1170 PX
• Height 2532 PX
• Device Width 390 PX
• Device Height 844 PX
• Dimensions 146.7 x 71.5 x 7.4 mm (5.78 x 2.81 x 0.29 in)
• Weight 164 g — 5.78 oz

Disclaimer: Information collected from different top relevent websites. It is tried to keep the information correct.
If you find anything wrong email us [email protected]

Advertise here

This website uses cookies, We and our partners use technology such as cookies to analyse our traffic and to show you personalised content and ads. You consent to our cookies by clicking «Agree» or by continuing to use our website.

Источник

Верстаем под iPhone

Автор: Hiway
Дата записи

На сегодняшний день рынок мобильных устройств, которые ориентированны на активное использование Интернет развивается очень динамично. И довольно большую часть рынка с тенденцией к ее увеличению занимает iPhone. Поэтому одно из лидирующих мест среди мобильных браузеров занимает Safari на iPhone. Есть положительные стороны верстки под iPhone: мобильный Safari, как и его старший брат, работает на WebKit (осуществляя богатую поддержку CSS3), верстать нужно только под одно ОС и одну резолюцию экрана. Однако есть моменты, на которые стоит обратить особе внимание, верстая под iPhone.

Верстая под iPhone, вам нужно принять тот факт, что пользователь девайса получит фактически сайт, который существенно отличается от сайта для обозревателя на ПК или нетбуке, но при этом сайт может быть не менее функциональным, поскольку может использовать передовые приемы CSS3 в верстке. Этот пост покажет вам некоторые из основ разработки и проектирования веб-сайтов для iPhone и мобильного Safari.

Для начала

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

Сначала вам нужно определить iPhone. Некоторые люди не согласны аппаратным обнаружением браузеров, но нам как-то нужно определить iPhone.
В примере кода ниже показано как с помощью PHP мы определяем iPhone и применяем к нему нужные действия. Для iPhone можно использовать и общие стили разметки, однако, некоторые специфичные моменты разметки нужно определить в специальном фале стилей для девайса. Кроме этого нужно еще определить специальный, укороченный, мета-тег title.

Что делает приведенный выше код? Просто определяет использует ли агент пользователя iPhone. Поместите этот кусок кода в самой верхней части страницы, перед любой другой частью разметки. Для того, чтобы использовать какой-то код только для iPhone нужно «обернуть» код в условие предоставленное ниже:

Сохранение в HomeScreen укороченного заголовка страницы

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

Короткий заголовок только для iPhone Обычный заголовк

Иконка в хомскрине

Сделать иконку очень просто. Все что нужно — это создать иконку размером 57×57px (как правило это увеличенная версия вашего favicon) в корневую директорию вашего сайта. Иконка должна называться apple-touch-icon.png и iPhone будет использовать ее по умолчанию вместо других.

Отмена пользовательского масштабирования

Второй фрагмента PHP используется для создания метатега под iPhone, который запрещает пользователю пинч-Zoom, который предлагает мобильный Safari:

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

Начало стайлинга

Некоторые разработчики предпочитают перенаправлять пользователей iPhone на совершенно другие версии сайта, мы не будем делать этого.
Мы можем использовать фрагмент PHP, который служит для того чтобы предоставить iPhone целый новый стиль. То есть, по сути вы не предоставляете пользователю новую структуру данных или полное описание стилей, а просто переопределяете разметку в нужным местах с помощью специального кода.

Первое, что вам нужно сделать, это убедиться, что главная ссылка на стили вашего сайта не имеет media атрибута:

В последствии вы можете распределить медиа атрибуты внутри вашего CSS. Все, что вам нужно сделать, это включить отдельные @media правила.
Общие стили не нужно определять никаким типом. Для печатных стилей используйте объявление @media print , например: @media print < body< style-info:here; >> и так же для других медиатипов.
Это даст нам возможность положить стили для iPhone непосредственно в конце главного файла стилей:

Теперь любой CSS перед объявлением декларации разрешения будет использоваться на всех типах устройств, а все что ниже декларации будут использовать устройства с максимальным размером экрана 480px (например, iPhone).

Что нужно помнить

Есть несколько ключевых моментов, которые используются при разработке CSS для iPhone:

• Избегайте абсолютной ширины там, где возможно использовать ширину в процентах.
• Линизируйте все, что это возможно, избегайте плавающих блоков. Не стоит разбивать контент на колонки без крайней необходимости.

Первое, что нужно сделать, это установить специальный стиль для WebKit webkit-text-size-adjust — это свойство будет управлять изменением размеров шрифтов в автоматическом режиме, если можно так выразиться, и вы не придется касаться размеров шрифта самостоятельно. Также, если ваша копия свойств элемента body использует Sans шрифт, например Arial, то вы можете использовать шрифты семейства Helvetica для нормальных сайтов. Однако, Helvetica, не должна использоваться в описании свойств основного элемента body сайта, поскольку она выглядит плох на ПК. Используйте это именно для iPhone:

В коде выше также добавлены небольшие отступы, чтобы убедиться, что ничего не коснется края окна браузера. Весь wrapper (оболочка контента) и содержащиеся в нем блоки должны иметь ширину равную 100%.

Структура

Теперь, когда основные параметры настроены мы можем перейти к созданию структуры разметки, взяв за основу наиболее распространенный вариант разметок данного типа — просто две колонки с логотипом и меню в шапке. Если вам нужна другая форма, то думаю на основе этой можно подогнать разметку под себя. Нужно сделать важное действие, о котором мы говорили ранее — удалить все плавающие блоки и установить ширину любого элемента равной 100%. Если вы используете блоки (div) с умом (т.е. для больших контейнеров контента, а не для пунктов навигации, например), то код ниже хорошо подойдет вам для «линеризации» контента:

Это заставит все блоки «отклеится» друг от друга, и принять полную ширину. Вот вы и начали «линеризировать» ваш контент.

Навигация

Если у вас есть навигация, в которой все элементы «отфлоченны» и выведены горизонтально, то стоит сделать следующее:

Это то даст вам вертикальное меню навигации, которое имеет 100% ширины, а ссылки имею большую область клика (посредством display:block; ), а это означает, что они видны в верхней части каждой страницы и более удобным для пользователей, чем если бы они были небольшими пунктами навигации.

Изображения

Поскольку каждое изображение изначально имеет ширину в пикселях (т.е. собственную ширину) существует высокая вероятность того, что они будут «вырываться» из обертки области (поскольку много изображений будет шире 480px). Для борьбы с этим используем следующее:

@media screen and (max-device-width: 480px) < body<. >div <. >#nav,#nav li <. >img < max-width:100%; height:auto; >>

Это основные элементы, которые присутствуют в любой разметке, есть также много элементов специфичных для каждой страницы, но при их оформлении стоит помнить два правила: относительная масштабируемость и «линеризация». Да, и помните, что верстая под iPhone вам можно не стеснятся использовать популярные свойства CSS3.

P.S. Как всегда о разном…

Казалось бы, что может быть общего между словами матрасы и свинина? А таки если покопаться в голове то можно найти общее. В мафиозных кланах США средины двадцатого века существовало такой понятие как, залечь на матрасы, что означало перейти на осадное положение сгруппировав основные силы в периметре ведения боевых действий, но в недоступности для врага. Так вот при этом делались масштабные закупки продовольствия, в которых свинина занимала очень значимую часть, как непосредственный источник белка для восстановления миозиновых волокон (собственно мышц) при нагрузка в столкновениях с врагом и заживлении ран.натуральное мыло

Источник