Screen Size and Web Design

最新推荐文章于 2022-05-18 21:34:38 发布

原创最新推荐文章于 2022-05-18 21:34:38 发布 · 276 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

Mobile Platform 专栏收录该内容

57 篇文章

订阅专栏

本文详细介绍了iPhone屏幕尺寸及其对网页设计的影响，包括像素密度、渲染像素、物理像素等概念，并提供了针对不同设备的网页设计技巧。通过分析设备列表和使用工具，帮助开发者实现高质量的响应式网页。

Screen Size and Web Design

iPhone Display Size(inches)
Diagonal measure of the screen, from corner to corner.

iPhone Screen Size(points)
Designing for the web(using CSS or JavaScript). Retina screens have higher pixel density.

iPhone Rendered Pixels
Create an image and want it at the max resolution.

iPhone Physical Pixels
This is the actual screen’s pixel resolution.

iPhone 6 Plus
5.5 in (Display Size)
414 x 736 points (Screen Size Points)
1242 x 2208 pixels (Rendered Pixels 3 x multiple of points used for creating images)
1080 x 1920 pixels (Physical Pixels)

Some website they provide the Device List
http://www.viewportemulator.com/devices/

http://viewportsizes.com/

Here are some popular devices now
iPhone 6
iPhone 6 Plus
iPhone 5S
iPad Mini 2
iPad Air 2

This website is really amazing.
https://www.browserstack.com

References:
http://www.kylejlarson.com/blog/2015/iphone-6-screen-size-web-design-tips/
http://viewportsizes.com/?filter=iphone%205
https://www.browserstack.com/responsive

http://www.viewportemulator.com/devices/