首先判斷是不是橫豎屏導致的問題，所以要程式碼檢驗一下。

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裡面設定屬性值。