前言：

　　最近自己寫的wap老專案要嵌入別人家的app裡，然後就OMG的了，適配出了問題，網頁上一切正常的，自家app也沒問題，咋個嵌入app就出問題了？於是陷入了深思。。。

　　以前為了遵循設計稿（750），用了祖傳程式碼：

(function () {
    var phoneWidth = parseInt(window.screen.width); //375...
    var phoneScale = phoneWidth / 750;
    var ua = navigator.userAgent;
    var deviceWidth = 750; //可視區域的寬度
    //
 
 var deviceWidth = 'device-width';

    if (/Android (\d+\.\d+)/.test(ua)) {
        var version = parseFloat(RegExp.$1);
        if (version > 2.3) {
            // andriod 2.3
            document.write('<meta name="viewport" content="width='+ deviceWidth +',initial-scale= ' + phoneScale + ', minimum-scale = ' + phoneScale + ', maximum-scale = ' + phoneScale + ', target-densitydpi=device-dpi">');
        } 
 
else {
            // andriod 2.3
            document.write('<meta name="viewport" content="width='+ deviceWidth +', target-densitydpi=device-dpi">');
        }
        // IOS
    } else {
        document.write('<meta name="viewport" content="width='+ deviceWidth +', user-scalable=no">');
    }
})();
 

注：一下所有關於畫素的計算都是以iphone6(375px)為例，幫助理解

其實很好用，但是嵌入別人家app就有問題，然後第三方的APP咋個除錯呢！！！於是開始了亂試階段，把deviceWidth改為'device-width'，然後各種嘗試都有問題，最終決定還是研究透徹原因再解決問題

先到網上搜索了相關meta name="viewport" content="width=device-width,initial-scale=1.0" 解釋，連結地址：https://www.cnblogs.com/yelongsan/p/7975580.html

 

content屬性值 :      width:可視區域的寬度，值可為數字或關鍵詞device-width      height:同width      intial-scale:頁面首次被顯示是可視區域的縮放級別，取值1.0則頁面按實際尺寸顯示，無任何縮放      maximum-scale=1.0, minimum-scale=1.0;可視區域的縮放級別，      maximum-scale使用者可將頁面放大的程式，1.0將禁止使用者放大到實際尺寸之上。      user-scalable:是否可對頁面進行縮放，no 禁止縮放   瞭解了一番後還是隻是瞭解了，還是不曉得啥子原因，於是求助咋們Android與ios，發現咋們是的app對於webwiew是做了配置的， Android：webSettings.setUseWideViewPort(true); //這裡需要設定為true，才能讓Webivew支援<meta>標籤的viewport屬性（so understand） ios:_webView.scalesPageToFit=YES;   於是微信上問了他們是否設定了該值，結果果然是設定為false，這下是找到原因了：   　　Android如果把setUseWideViewPort設定為false,就不會用到我的viewport，那麼webview應該預設的viewport是meta name="viewport" content="width=device-width,initial-scale=1.0" ，但是我的所有樣式都是以設計稿750為準寫的畫素，意思就是比如ihone6，device-width就是375，也就是說可視區域的寬度為375，但是我寫的css樣式寬750px（100%寬）的縮放比例為1（就是不縮放），那麼就會在檢視中看到我的樣式全是兩倍大小，因為可視區域375，而我寫的是750的並且沒縮放。   　　ios的scalesPageToFit 　　預設情況下UIWebView載入HTML頁面後，會以頁面的原始大小進行顯示，亦即如果頁面的大小超出UIWebView視口大小，UIWebView會出現滾動效果，而且使用者只能通過滾動頁面來檢視不同區域的內容，不能使用手指的捏合手勢來放大或縮小頁面，設定scalesPageToFit為yes之後，縮放HTML頁面來適配其視口大小，從而達到整屏顯示內容的效果，並且使用者可以用捏合動作來放大或縮小頁面來檢視內容。所以ios我沒有設定scale模式，因為一般瀏覽器會自己算，但是如果app的scalesPageToFit沒設定或者設定為no的話，就不會計算scale,從而導致頁面也顯示兩倍大小，而安卓並不會自己算，所以在程式碼裡實現設定了   　　那麼到這裡scale是明白了，但是width與scale之間的關聯是什麼呢，我試了試在APP相容的情況下，width設定為750與device-width的區別: 　　　　width設定為750 可以達到各個端的完美適配（即把width設定為750px可以達到各個端寬度100%的效果），而device-width並不可以，這是為什麼呢？ 　　首先ios自己能算的前提就是我們設定的width,這個width就相當於我上面算phoneScale的分母;如果是device-width（375），那麼scale就為1，導致ios頁面不縮放，檢視上會感覺兩倍大（這裡僅針對iphone6,其他機型根據device-width不同，scale也不同） 　　而針對於Android，沒啥區別，畢竟phoneScale是自己程式碼算的，只是在https://www.cnblogs.com/yelongsan/p/7975580.html裡有提到 　　　　   　　另外如果app不做相容，咋個辦，就只<meta name="viewport"  content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">， 然後所有css檔案的畫素乘以0.5了,這種方案不能完全適配，還需結合百分比進行適配，因為理論上只有375的裝置才是所有樣式乘以0.5，其他的一些裝置可能算下來是的scale可能是0.48或者0.56之類的，只是算下來相差不大， 所以檢視上感覺沒什麼問題。但是平板上問題就出來了，樣式就會非常小，可以讓pad跳pc站。要不然終極解決方案就是用rem,但是改動就更大了。所以還是需要app做下相容啊！   　　最後，以上只是我的個人理解，有問題大家多多指正，謝謝！