移动端开发_unionapp 获取手机设备像素比-CSDN博客

本文链接：https://blog.csdn.net/web_only_/article/details/105380031

移动端开发

	PC端	移动端
Vue.js	Element UI	Vant、uni-App、… …
原生开发	jQuery	Bootatrap、Frameworks 7

适用于PC端的页面是可以直接在移动端显示的，只是需要双指缩放来放大界面

一、视口（viewport）

设置一个可以用来在移动端进行页面显示的区域，保证没有水平滚动条，还有一定的清晰程度。
在HTML文档的<head></head>中进行视口设置。

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

属性名	属性值
width	设置视口的宽度。可以取值为device-width（设备宽度）
initial-scale	设置视口的初始化缩放比例。initial-scale=1.0
minimum-scale	设置视口允许缩放的最小比例。minimum-scale=1.0
maximum-scale	设置视口允许缩放的最大比例。maximum-scale=2.0
user-scalable	设置是否允许用户通过双指进行页面的缩放。取值为yes/no

二、如何进行页面访问设备的判断

1、使用BOM中的navigator对象的userAgent（用户代理）

例：使用Chrome浏览器访问下列代码。

console.log(window.navigator.userAgent);

Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36

先判断是否带有trident字符串，来判断是否为IE浏览器。
继续判断是否带有opr字符串，来判断是否为Opera浏览器（欧朋）。
继续判断是否带有chrome字符串，来判断是否为Chrome浏览器（谷歌）。
若上面的字符串都不具备，则可以判断是FF浏览器（FireFox）。

代码如下：

var ua = window.navigator.userAgent.toLowerCase();
console.log(ua);
if(ua.indexOf("trident")!=-1){
	console.log("用户使用的是IE浏览器");
}else if(ua.indexOf("opr")!=-1){
	console.log("用户使用的是Opera浏览器");
}else if(ua.indexOf("chrome")!=-1){
	console.log("用户使用的是Chrome浏览器");
}else{
	console.log("用户使用的是FireFox浏览器");
}

2、如何判断移动端设备

判断userAgent是否带有iphone字样，判断是否是iPhone产品。
判断userAgent是否带有ipad字样，判断是否是iPad产品。
判断userAgent是否带有ipod字样，判断是否是iPod Touch产品。
判断userAgent是否带有android字样，判断是否是Android产品。

例：判断设备是否为移动端设备

var ua = window.navigator.userAgent.toLowerCase();
console.log(ua);
if(ua.indexOf("iphone")!=-1 || ua.indexOf("ipad")!=-1 || ua.indexOf("android")!=-1){
	console.log("用户使用的是移动设备");
	location.href = "mobile/index.html";
}else{
	console.log("用户使用的是PC设备");
}

三、移动端设备的屏幕问题

1、认识Retina屏

Retina屏：	视网膜屏
开发公司：	摩托罗拉
苹果第一款Retina屏设备：	iPhone 4

在这里插入图片描述

2、设备像素

设备像素：Device Pixel，简写为DP，也被称为“物理像素”（Physical Pixel）。

设备像素一般采用水平分辨率和垂直分辨率组成。
例如：iPhone 6 的设备像素为 750 * 1334。
设备像素的特点：
1. 出厂就设置好
2. 不是设备的固有属性
3. 不会发生变化

3、设备尺寸

设备尺寸：Device Size，简写为DS。

设备尺寸是指设备对角线的长度，单位为英寸（inch），简称“寸”。
在这里插入图片描述

屏幕种类	设备	设备像素	尺寸
非视网膜屏：	iPhone 3GS	320 * 480	3.5
视网膜高清屏：	iPhone 4	640 * 960	3.5
视网膜高清屏：	iPhone 5	640 * 1136	4
视网膜高清屏：	iPhone 6/6s/7/8	750 * 1334	4.7
视网膜高清屏：	iPhone 6+/6s+/7+/8+	1080 * 1920	5.5
超视网膜高清屏：	iPhone X/XS	1125*2436	5.85
超视网膜高清屏：	iPhone XR	828 * 1792	6.06
超视网膜高清屏：	iPhone XS MAX	1242 * 2688	6.46

5、像素密度

像素密度：Pixel Density，简写为PD，单位尺寸的屏幕上所含有的设备像素个数。

单位：像素/英寸，Pixel Per Inch（PPI）。
在这里插入图片描述
设备像素点有时候也被称为“点”（dot），因此在移动显示屏领域，像素密度也可以用点/英寸为单位，即Dots Per Inch，DPI。

编写函数计算移动设备的像素密度：

function getPixelDensity(pixelX,pixelY,deviceSize){
	//pixelX：水平分辨率
	//pixelY：垂直分辨率
	//deviceSize：设备尺寸
	return Math.sqrt(Math.pow(pixelX,2)+Math.pow(pixelY,2))/deviceSize;
}

6、设备独立像素

设备独立像素：Device Independent Pixel，简写为DIP，也被称为“逻辑像素”。

在这里插入图片描述
iPhone 4用4个物理像素表示1个设备独立像素（横向2个物理像素表示1个设备独立像素，纵向2个物理像素表示一个设备独立像素），这一切都是由操作系统控制的。

移动设备的设备独立像素可以使用下列代码获得：

视屏设备独立像素：screen.width
垂直设备独立像素：screen.height

CSS像素：编写移动端项目时所设置CSS属性取值被称为CSS像素。
在项目没有被缩放的情况下，CSS像素就是设备独立像素。

7、设备像素比

设备像素比：Device Pixel Ratio，简写为DPR，设备上设备像素和设备独立像素的比值。

在这里插入图片描述
设备像素比是视网膜屏与非视网膜屏的一个识别区别：非视网膜屏的设备像素比为1，视网膜屏的设备像素比大于等于2。

设备型号	设备像素	系统分辨率	设备像素比
iPhone 3GS	320 * 480	320 * 480	1
iPhone 4	640 * 960	320 * 480	2
iPhone 4s	640 * 960	320 * 480	2
iPhone 5	640*1136	320 * 568	2
iPhone 5s	640*1136	320 * 568	2
iPhone 6/7/8	750 * 1334	375 * 667	2
iPhone 6+/7+/8+	1080 * 1920	414 * 736	2.6
iPhone X/XS	1125*2436	375*812	3
iPhone XR	828 * 1792	414*896	2
iPhone XS MAX	1242 * 2688	414*896	3
Galaxy S4	1080 * 1920	360 * 640	3