JS制作手机端自适应缩放显示
示例一：
var _width = parseInt(window.screen.width);
var scale = _width/640;
var ua = navigator.userAgent.toLowerCase();
var result = /android (\d+\.\d+)/.exec(ua);
if (result){
var version = parseFloat(result[1]);
if(version>2.3){
document.write('<Meta name="viewport" content="width=640,minimum-scale = '+scale+',maximum-scale = '+scale+',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">');
}
示例二：
示例三：
Meta charset="UTF-8">
<Meta content="width=device-width,initial-scale=1.0,user-scalable=0" name="viewport">
<Meta content="yes" name="apple-mobile-web-app-capable">
<Meta content="black" name="apple-mobile-web-app-status-bar-style">
<Meta content="telephone=no" name="format-detection">
总结：
一.其实并不难。 首先，在网页代码的头部，加入一行viewport元标签。
二. 不使用绝对宽度 由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。
三. 相对大小的字体 字体也不能使用绝对大小（px），而只能使用相对大小（em）。
四. 流动布局（fluid grid） "流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的。 .main { float: right; width: 70%; } .leftBar { float: left; width: 25%; }
五. 图片的自适应（fluid image） 除了布局和文本，"自适应网页设计"还必须实现图片的自动缩放。
以上所述就是本文的全部内容了，希望大家能够喜欢。
原文链接：https://www.f2er.com/js/53912.html