常见手机的设备分辨率、viewport和devicePixelRatio

最新推荐文章于 2025-06-11 09:20:04 发布
转载 最新推荐文章于 2025-06-11 09:20:04 发布 · 2.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/GameEngine/p/7237405.html
文章标签：

#游戏 #移动开发

本文汇总了各类常见手机和平板电脑的设备分辨率、viewport分辨率及1rem的大小，并提供了不同品牌和型号的具体数值，有助于开发者更好地进行响应式网页设计。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

常见手机的设备分辨率和viewport分辨率,及其1rem的大小（以vmin为单位）

 

 

 

 

 

 

 常见的devicePixelRatio是1, 1.325, 1.5, 2, 2.4, 3.  (具体见下面的表格，从Chrome Emulator中导出的）。

 

 

BrandDeviceResolutionPixel Ratio
AmazonKindle Fire1024x6001
AmazonKindle Fire HD 7"1280x8001.5
AmazonKindle Fire HD 8.9"1920x12001.5
AppleiPad 11024x7681
AppleiPad 21024x7681
AppleiPad 32048x15362
AppleiPad 42048x15362
AppleiPad Mini1024x7681
AppleiPhone 3GS320x4801
AppleiPhone 4640x9602
AppleiPhone 5640x11362
BlackBerryPlayBook1024x6001
BlackBerryZ10768x12802
BlackBerryZ30720x12802
GoogleNexus 102560x16002
GoogleNexus 4768x12802
GoogleNexus 51080x19203
GoogleNexus 71280x8001.325
GoogleNexus 7 (2013)1920x12002
GoogleNexus S480x8001.5
HTCDesire480x8001.5
HTCDesire HD480x8001.5
HTCEvo480x8001.5
HTCEvo 3D540x9601.5
HTCEVO LTE720x12802
HTCOne X720x12802
HTCSensation540x9601.5
HTCTouch HD480x8001.5
LGOptimus 2X480x8001.5
LGOptimus 3D480x8001.5
LGOptimus 4X HD720x12801.7
LGOptimus Black480x8001.5
LGOptimus G768x12802
LGOptimus LTE720x12801.7
LGOptimus One320x4801.5
MotorolaAtrix 2540x9601
MotorolaAtrix 4G540x9601
MotorolaDefy480x8541.5
MotorolaDroid480x8541.5
MotorolaDroid 3540x9601
MotorolaDroid 4540x9601
MotorolaDroid Razr540x9601
MotorolaDroid Razr HD720x12801
MotorolaDroid X480x8541.5
MotorolaMilestone480x8541.5
MotorolaXoom1280x8001
MotorolaXyboard1280x8001
NokiaC5360x6401
NokiaC6360x6401
NokiaC7360x6401
NokiaLumia 7X0480x8001.5
NokiaLumia 8XX480x8001.5
NokiaLumia 900480x8001.5
NokiaLumia 920768x12802.4
NokiaLumia 925768x12802.4
NokiaLumia 928768x12802.4
NokiaLumia 1020768x12802.4
NokiaN8360x6401
NokiaN800480x8001.5
NokiaN810480x8001.5
NokiaN900480x8001.5
NokiaN97360x6401
NokiaX7360x6401
SamsungGalaxy Nexus720x12802
SamsungGalaxy Note800x12802
SamsungGalaxy Note 2720x12802
SamsungGalaxy Note 31080x19202
SamsungGalaxy S480x8001.5
SamsungGalaxy S 2480x8001.5
SamsungGalaxy S 3720x12802
SamsungGalaxy S 41080x19203
SamsungGalaxy Tab1024x6001
SamsungGalaxy Tab 10.11280x8001
SamsungGalaxy Tab 7.71280x8001
SamsungGalaxy Tab 8.91280x8001
SamsungGalaxy W480x8001.5
SonyXperia Ion720x12802
SonyXperia S720x12802
SonyXperia Sola480x8541
SonyXperia U480x8541
SonyXperia Z1080x19203
SonyXperia Z11080x19203

 

Common display resolutions[edit]

Standard

Aspect ratio

Width (px)

Height (px)

% of Steam users (Aug 2017)

 % of web users (May 2017)

SVGA

4:3

800

600

n/a

0.35

WSVGA

~17:10

1024

600

n/a

0.44

XGA

4:3

1024

768

1.06

5.34

XGA+

4:3

1152

864

n/a

0.37

WXGA

16:9

1280

720

0.52

2.69

WXGA

5:3

1280

768

0.24

0.54

WXGA

16:10

1280

800

1.13

5.52

SXGA

5:4

1280

1024

2.90

5.14

HD

~16:9

1360

768

2.36

2.25

HD

~16:9

1366

768

17.85

29.94

WXGA+

16:10

1440

900

4.15

6.7

other

16:9

1536

864

0.66

3.5

HD+

16:9

1600

900

4.76

5.89

WSXGA+

16:10

1680

1050

3.11

2.71

FHD

16:9

1920

1080

54.28

16.02

WUXGA

16:10

1920

1200

1.02

1.23

other

21:9

2560

1080

0.69

n/a

WQHD

16:9

2560

1440

2.66

1.67

other

21:9

3440

1440

0.28

n/a

4K UHD

16:9

3840

2160

0.90

n/a

Other

   

1.44

8.1

 

* https://www.netmarketshare.com/report.aspx?qprid=17  （市场份额统计资料）

https://material.io/devices/

https://hwstats.unity3d.com/mobile/display-winrt.html
http://mediag.com/news/popular-screen-resolutions-designing-for-all/
https://bobmckay.com/web/tablet-smartphone-resolutions-screen-sizes/

 

http://www.cnblogs.com/GameEngine/p/6528721.html

iPhone viewport设置： 

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

https://en.wikipedia.org/wiki/Display_resolution

 

转载于:https://www.cnblogs.com/GameEngine/p/7237405.html

一些移动端设备的devicePixelRatio
JasonRaySHD的博客
04-28 2071
设备像素为:1.0 (-webkit-min-device-pixel-ratio) 所有non-Retina mac电脑 苹果iPhone(第一代) 苹果iPhone 3 g 苹果iPhone 3 gs 苹果iPad(第一代) 苹果iPad 2 苹果iPad迷你(第一代) 宏碁Iconia A500 三星Galaxy Tab 10.1 三星Galaxy S 设备像素为:1.3 (-w...
unity获取设备分辨率
Unity
04-26 6339
设备分辨率 [csharp] view plain copy   using UnityEngine;     using System.Collections;          public class ExampleClass : MonoBehaviour {         void Start() {             
设备像素比devicePixelRatio简单介绍
赚钱养自个儿的博客
05-02 1879
  目录一、定义二、浏览器支持三、其他一些系统、设备1、iOS2、Android3、视网膜MacBook四、其他相关属性小小结论五、参考文章     from 张鑫旭-鑫空间-鑫生活：http://www.zhangxinxu.com 转载自http://www.zhangxinxu.com/wordpress/?p=2568   因为不知道怎么直接从大佬张鑫旭的博客转载过来，可能我太笨了吧，所以...
Unity WebGL小游戏渲染性能优化指南
最新发布
gitblog_00121的博客
06-11 546
Unity WebGL小游戏渲染性能优化指南 前言 随着移动游戏市场的蓬勃发展，越来越多的开发者选择使用Unity引擎开发微信小游戏。然而，WebGL平台与原生平台在性能表现上存在显著差异，特别是在移动设备上。本文将深入探讨Unity WebGL游戏在微信小游戏平台上的渲染性能优化策略，帮助开发者提升游戏运行效率，改善用户体验。 WebGL版本选择 WebGL1.0与WebGL2.0对比 在开发U...
Unity3D之如何创建正确的像素比在屏幕上
热门推荐
码农
11-28 2万+
关于这篇文章的命名,实在不知道怎么命名好,大概功能就是：比如一张宽高为100x100的图片显示在屏幕上，那2D摄像头的Size值为多少时，屏幕上显示出来图片大小和图片的实际像素一致。 这里涉及到一个GL坐标和像素坐标值的转换比，这个比值我们可以自己设置～之后我们设置面上顶点的大小也是依据这个来设置的。         比如上面的图的坐标系是世界坐标,而摄像机的坐标在原点(0,0
CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport(1)
2401_84092456的博客
05-05 409
一只笔的像素如下：自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
手机分辨率和网页中的 px 是一回事吗？
IT修真院：初学者转行到互联网的聚集地
05-22 1236
大家好，这里是修真院前端小课堂，今天给大家分享的是 《手机分辨率和网页中的 px 是一回事吗？》 1. 背景介绍 对于 pc 端适配的问题（除开布局方式），在不改变电脑分辨率，和缩放网页状态下。通常只需要设置中设置 viewport 即可。但是放在手机上时候就不一样了，你需要了解 px,dips,ppi 等等有关知识，才能应付移动端各种适配问题以及坑，光是 Android 各种花式...
微信小程序（布局适配与物理逻辑像素）
zuomengjia的博客
11-21 893
前言 移动端开发经常遇到一些概念：物理像素、逻辑像素、像素密度、像素比等，本节来详细介绍下 关键词： 屏幕尺寸、物理像素/屏幕分辨率/物理分辨率、逻辑像素DIP、像素密度PPI、像素比DPR、视网膜显示屏Retina、rpx、vw、vh等。 屏幕尺寸 华为荣耀7 图上写的是5英寸。那么这个5英寸到底是怎么算出来的呢？ 先进行一下单位的换算1英寸（inch）=2.54厘米（cm） 屏幕尺寸指...
Intouch报表自适应设计：适配不同设备和分辨率的布局策略
[Intouch报表自适应设计：适配不同设备和分辨率的布局策略](https://kobiton.com/wp-content/uploads/2023/12/3-1024x597.png) # 摘要 随着Intouch报表系统在企业级应用中的普及，报表的自适应设计变得日益重要。...
关于meta viewport中target-densitydpi属性详解（推荐）
12-10
更好的方法可能是结合使用 `device-width`、`initial-scale` 和 `-webkit-device-pixel-ratio` 等其他 `meta viewport` 属性，以实现更加精确的适配。 例如，在一个简单的HTML结构中，可以这样设置 `meta viewport`...
【Unity WebGL】UnityWebGL相关的小技巧（一）
qq_36423720的博客
09-07 3363
Unitywebgl 相关技巧
CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport
qq_33834489的博客
02-03 3841
最近看了很多这方面的文章，能搜到的基本看了个遍，但感觉还是似懂非懂，知道这个东西，很难说出这是个什么东西，先整理一些概念，慢慢消化，以后慢慢探索其中的原因。 1、PX(CSS pixels) 1.1 定义 虚拟像素，可以理解为“直觉”像素，CSS和JS使用的抽象单位，浏览器内的一切长度都是以CSS像素为单位的，CSS像素的单位是px。 1.2 注意 在CSS规范中
关于window.devicePixelRatio
weixin_44283589的博客
05-25 1928
例如，如果一个设备的物理像素分辨率是640x480，CSS像素分辨率是320x240，那么 window.devicePixelRatio 的值就是 2。在移动设备中，window.devicePixelRatio 常用于响应式设计，以确定设备的屏幕尺寸和分辨率，从而为不同设备提供不同的CSS样式。但是，为了满足不同设备的显示需求，开发人员使用CSS像素，这是一个抽象的单位，与设备的物理像素无关。CSS像素是指网页上的一个点，而这个点会被浏览器渲染成多个物理像素，以适应不同设备的分辨率。
当我们在讨论设备像素比（device pixel ratio，dpr）的时候我们在讨论什么？
Christopher的博客
01-30 2424
0. 为什么要写这篇文章？ 最近在查阅了一些移动端适配的文章和资料，对大多数的概念和论述没发现有疑惑的地方，唯独对设备像素比（device pixel ratio，dpr）有些不解，而设备像素比在理解移动端概念以及适配都有重要作用，所以做了更多的资料查阅和理解，这期间花了一些时间，也希望有不同意见的同学可以交流一下 ps：这篇文章不是移动端适配入门文章，不对大多数基础概念进行解释，例如像素，viewport，meta标签和主流适配方案等，如果还没了解基础概念，建议读一下相关文章再来看（也可以先阅读我下面列出
设备像素比
weixin_44283589的博客
01-30 567
例如，如果设备像素比为2，意味着设备的屏幕分辨率是CSS像素的两倍。这意味着在CSS中定义的100px宽度的元素在设备上实际上会占据200个物理像素。通过使用window.devicePixelRatio属性，我们可以根据设备的像素比来调整网页的布局和样式，以适应不同的屏幕分辨率。设备像素比是设备像素和CSS像素之间的比率，在缩放比为1的情况下计算得出。window.devicePixelRatio是一个JavaScript属性，用于获取设备的像素比（DPR）
ctx.drawImage的canvas绘图不清晰解决方案,以及canvas高清导出
阿牛哥的博客
02-23 2621
ctx.drawImage的canvas绘图不清晰解决方案,以及canvas高清导出
移动端适配(学习笔记)
qq_45519787的博客
04-14 891
从基础概念（dpr，逻辑像素，css像素，设备独立像素，物理像素，逻辑分辨率，物理分辨率，二倍图，视口，meta标签等）到移动端适配方案
QWindow类devicePixelRatio函数作用
danshiming的博客
09-12 3213
QWindow类devicePixelRatio函数作用
前端浏览器和分辨率兼容
03-14
<think>好的，我需要回答用户关于前端开发中浏览器与分辨率兼容性问题的最佳实践。首先，用户提到了浏览器兼容性和分辨率适配，这两个都是前端开发中的常见问题。根据用户提供的引用，IE8不支持某些字符串方法，而大屏分辨率适配需要考虑设备像素比和缩放因素。 首先，关于浏览器兼容性问题，我需要整理常见的兼容性问题和解决方案。比如，IE8不支持endsWith、trim()等方法，这时候需要用polyfill或者第三方库如ES5-Shim来填补这些缺失的方法。同时，CSS3特性如flexbox在旧浏览器中可能不支持，需要使用autoprefixer自动添加前缀，或者提供降级方案。 然后是关于分辨率适配的问题。用户提到的设备像素比（devicePixelRatio）和缩放会影响布局，导致内容溢出或显示不全。常见的解决方案包括使用rem或vw单位进行弹性布局，结合媒体查询来调整不同屏幕尺寸下的样式。另外，全屏适配可能需要JavaScript动态计算缩放比例，并应用在容器上，确保内容适应各种分辨率。 接下来需要结合用户提供的引用内容，引用[1]提到IE8的兼容性问题，引用[2]讨论了大屏分辨率的适配方法。在回答中需要自然地引用这些内容，并添加脚注。 还要考虑用户可能需要的具体实践步骤，比如如何检测浏览器特性，如何使用工具自动化处理兼容性，以及如何测试不同分辨率下的显示效果。同时，可能还需要提到响应式设计的其他方法，如图片适配、视口设置等。 最后，生成的相关问题需要覆盖浏览器兼容的具体方法、分辨率适配的技术选择、测试工具以及常见布局问题的解决方案。确保问题能够引导用户进一步深入理解各个方面的细节。</think>### 前端开发中浏览器与分辨率兼容性适配最佳实践 #### 一、浏览器兼容性问题解决方案 1. **JavaScript API兼容性** - **问题示例**：IE8 不支持 `endsWith()`、`startsWith()`、`trim()` 等字符串方法[^1]。 - **解决方案**：使用 Polyfill 或第三方库（如 ES5-Shim）补充缺失方法： ```javascript // 为 String.prototype 添加 trim() 方法 if (!String.prototype.trim) { String.prototype.trim = function() { return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''); }; } ``` 2. **CSS3特性兼容** - **问题示例**：旧版浏览器不支持 Flexbox 或 Grid 布局。 - **解决方案**： - 使用 Autoprefixer 自动生成浏览器前缀（如 `-webkit-`, `-moz-`）。 - 提供降级方案（如用 `float` 替代 Flexbox）。 3. **HTML5标签兼容** - **问题示例**：IE8 不支持 `<header>`, `<section>` 等语义化标签。 - **解决方案**：引入 HTML5 Shiv 脚本激活标签解析。 --- #### 二、分辨率适配核心方案 1. **视口与缩放控制** - 设置 `<meta name="viewport">` 禁止用户缩放，避免布局错乱： ```html <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> ``` 2. **响应式布局技术** - **弹性单位**：使用 `rem` 或 `vw/vh` 单位实现动态缩放： ```css /* 基准尺寸为 1920px 设计稿 */ html { font-size: calc(100vw / 19.2); } .box { width: 10rem; } /* 等价于 10% 视口宽度 */ ``` - **媒体查询**：针对不同分辨率调整样式： ```css @media (max-width: 1366px) { .chart { transform: scale(0.85); } } ``` 3. **大屏全屏适配方案[^2]** - 动态计算缩放比例并应用： ```javascript function adjustLayout() { const targetRatio = 1920 / 1080; // 设计稿宽高比 const currentRatio = window.innerWidth / window.innerHeight; const scale = currentRatio > targetRatio ? window.innerHeight / 1080 : window.innerWidth / 1920; document.getElementById('container').style.transform = `scale(${scale})`; } window.addEventListener('resize', adjustLayout); ``` --- #### 三、综合实施策略 1. **检测工具** - 使用 Can I Use 查询 API 兼容性 - 通过 BrowserStack 多浏览器/分辨率测试 2. **工程化支持** - Webpack 配合 PostCSS 自动处理 CSS 兼容 - Babel 转译 ES6+ 语法 3. **降级原则** - 渐进增强：先保证基础功能在所有浏览器可用 - 优雅降级：在高版本浏览器中增强体验 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值