移动浏览器

html

15-12-14 15:04:22

物理像素  是手机有多少个点!!    720*1920      

逻辑像素 是软件最高可以达到的像素。          就好比  iphone4  物理像素是  640*960  逻辑像素是 320*480

因为 设备像素比  dpr    window.devicePixelRatio    

dpr=物理像素/逻辑像素


计算方式  比如720*1280  5.5寸手机


720*720+1280*1280 开方  在除 屏幕尺寸   ppi 约等于 267

ppi小于160 目前也没有多少了

ppi 在 160-380之间 都是 dpr2

大于380 dpr 基本都是3

在 android 开发中常常会使用到手机屏幕密度和屏幕逻辑尺寸来进行屏幕适配,这里就列出常见手机的屏幕参数列表:

像素密度等级 逻辑像素密度 屏幕像素 屏幕尺寸(inch) 宽逻辑尺寸(dp单位) 真实像素密度
ldpi-0.75 120 240*320 2.7 w320dp 140.55
mdpi-1 160 320*480 3.2 w320dp 180.27
hdpi-1.5 240 480*800 3.4 w320dp 274.39
xhdpi-2 320 720*1280 4.65 w360dp 315.6
xhdpi-2 320 768*1280 4.65 w384dp 321
xxhdpi-3 480 1080*1920 4.95 w360dp 445
xxxdpi-4 560 1440*2560 5.96 w360dp 492
   



viewport 视窗

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

width 宽度等于设备的宽度 device-width

initial-scale  初始缩放比例  设为1.0则将显示未经缩放的Web文档

maximum-scale和minimum-scale 页面缩放比例的最大最小限制。值的范围为0.25至10.0之间。

user-scalable指令指定用户是否可以缩放视区,即缩放Web页面的视图。值为yes时允许用户进行缩放,值为no时不允许缩放。


<meta name="format-detection" content="telephone=yes"/ >

telephone的值可为yes/no,用来设置是否将网页上面的电话显示为可拨号码的超链接。

移动手机访问pc网站内容  默认情况下移动端会创建一个980宽的窗口来显示内容  多出的地方将会出现滚动条 

只要设置 视窗的大小 等于设备的逻辑像素即可


然后根据设备的逻辑像素开发网页就行拉!!!