【解决】移动端设备·横竖屏时页面内容字体大小调整的问题

首先判断是不是横竖屏导致的问题，所以要代码检验一下。

window.orientation 对象在手机上才可生效。

<script type="text/javascript">
    var evt = "onorientationchange" in window ? "orientationchange" : "resize";
    window.addEventListener(evt,resize,false);
        function resize(fals) {
            if(window.orientation == 0 || window.orientation == 180) {
                    alert("竖屏");
                }else {
                    alert("横屏");
            }
        }
    resize(true);
</script>

上面的这串JS代码，就可以检测出移动端设备的横竖屏状态。

---

那么如何解决·横竖屏时页面内容字体大小呢？这里就要用到 css 的一个属性值了：text-size-adjust : none

body {
     -webkit-text-size-adjust : 100% ;
     -moz-text-size-adjust : 100% ;
     -ms-text-size-adjust : 100% ;
     text-size-adjust : 100%;
   }

设置属性：text-size-adjust : 100%; 这个属性值可以设置移动设备上的横竖屏，字体变化的问题，但必须设置100%。不能设置为none，不然，webkit浏览器无法人为放大文字大小，严重影响可用性。

设置这个属性哪里需要的地方就在哪里设置，如果全文都需要，那就在body里面设置属性值。