移动端页面的尺寸设置

来源：互联网发布：淘宝怎么投诉卖家版权编辑：程序博客网时间：2024/04/25 13:47

viewport就是浏览器上可以显示网页的部分

将宽度设为640，因为目前主流的设备宽度为640，样式上不用特殊处理，与PC书写保持一致。

target-densitydpi=device-dpi,指定屏幕像素密度DPI,device-dpi 为设备原本的DPI值,不会有任何缩放

在iphone3上，一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的

随着手机分辨率的越来越高，css代表的像素就越来越多

手机端自适应缩放

if(/Android (\d+\.\d+)/.test(navigator.userAgent)){//判断是否为安卓手机
var version = parseFloat(RegExp.$1);
if(version>2.3){
var phoneScale = parseInt(window.screen.width)/640;
document.write('<meta name="viewport" content="width=640, minimum-scale = '+ phoneScale +', maximum-scale = '+ phoneScale +', target-densitydpi=device-dpi">');//640的倍数进行缩放
}else{
document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
}
}else{
document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
}

/initial-scale表示初始时的缩放比例

minimum-scale和maximum-scale分别表示最小和最大缩放比例

0 0