js自适应屏幕大小,js自适应不同屏幕分辨率

1.首先先了解几个事件：

　　orientationchange：在用户水平或者垂直翻转设备（即方向发生变化）时触发的事件。

　　　　　　　　　　　　 $(window).on("orientationchange",function(event){...})必须。指定 orientationchange 事件触发后执行的函数。

　　　　　　　　　　　　要确定设备按哪个方向旋转，您可以访问方向属性 orientation ，属性值可以是 "portrait（纵向）" 或者 "landscape（横向）"。

　　Portrait = 设备在纵向位置旋转　　Landscape = 设备在横向位置旋转

 　　DOMContentLoaded ：判断DOM是否加载完毕

　　　　　　　　　　　　　　尽管这个事件会冒泡到window，但它的目标实际上是document;

　　　　　　　　　　　　　　IE9+、Firefox、Chrome、Safari 3.1+和Opera 9+都支持DOMContentLoaded 事件

 

下面是JS适配代码:

　　

<script type="text/javascript"> (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; // 根据设备的比例调整初始font-size大小 if(clientWidth>640) clientWidth = 640; docEl.style.fontSize = 50 * (clientWidth / 320) + 'px'; }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window); </script>

 

转载于:https://www.cnblogs.com/H5C3XXN/p/7372620.html