xjinza
3/29/2018 - 10:13 AM

手机适配 #css #js #mobile

手机适配 #css #js #mobile

adapt
content_copyfile_download
设计稿按照双倍设计,字体pc端28px，图片两倍大小
<head>
	<meta name="viewport" id="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<style>
html {
	font-size: 62.5%; /*10 ÷ 16 × 100% = 62.5%*/
}
body{
	font-size: 2.8rem;
}
</style>
<script>
	var winWidths    = (document.body) && (document.body.clientWidth) ? document.body.clientWidth : window.innerWidth;
	var defaultWidth = 750;
	var viewport     = document.getElementById('viewport');
	var appScale     = winWidths >= defaultWidth ? 1 :(winWidths / defaultWidth);
	viewport.content = 'width=device-width,initial-scale=' + appScale + ', minimum-scale=' + appScale + ', maximum-scale=' + appScale;
</script>
viewport如今许多其他移动端浏览器已经支持这一标签，虽然它不是任何web标准的一部分。
兼容性参考：https://www.quirksmode.org/mobile/tableViewport.html
参考：http://www.alloyteam.com/2016/03/mobile-web-adaptation-tool-rem/

 ~function() {
            var winWidths = (document.body) && (document.body.clientWidth) ? document.body.clientWidth : window.innerWidth;
            var defaultWidth = 750;
            var appScale = winWidths >= defaultWidth ? 1 : (winWidths / defaultWidth);
            //document.getElementsByTagName('html')[0].style.fontSize = appScale * 100 + 'px !important'; //无效，!important去掉就可以，用setAttribute
            //document.getElementsByTagName('html')[0].setAttribute('style', 'font-size:' + appScale * 100 + 'px !important');
            viewport.content = 'width=device-width,initial-scale=' + appScale + ', minimum-scale=' + appScale + ', maximum-scale=' + appScale;
        }();

参考：https://www.cnblogs.com/2050/p/3877280.html