移动端的适配真是一件让人头疼的事情,本小白一直在摸索前进,因为最近在做移动端的H5页面,为了响应领导的号召,尽量适配各种手机,抓狂一段时间后,参考前辈经验,总结出以下3套方案。
一:固定宽度,让显示内容根据设备的大小缩放,不考虑苹果设备的高清显示。
代码如下:
<span style="font-family:Times New Roman;font-size:18px;">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">');
}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">');
}</span>
这是比较常见的一种做法,简单粗暴,最大的好处就是设置元素大小的时候可以直接根据设计稿的大小