移動端開發資源

時間 2019-11-16

標籤移動開發資源欄目無線简体版

原文原文鏈接

使用Flexible實現手淘H5頁面的終端適配（淘寶官方）：https://github.com/amfe/article/issues/17css

移動前端自適應解決方案和比較：http://caibaojian.com/mobile-responsive-example.htmlhtml

如何適配不一樣分辨率和不一樣屏幕尺寸的手機：http://www.html5cn.org/article-9368-1.html前端

多終端屏幕適配：http://www.html5cn.org/article-9865-1.htmlhtml5

移動H5前端性能優化指南：http://segmentfault.com/a/1190000002511921java

深刻了解viewport和px：http://tgideas.qq.com/webplat/info/news_version3/804/7104/7106/m5723/201509/376281.shtmlandroid

背景圖片百分比及應用：http://caibaojian.com/background-position-percent.html?wbios

如何打造一個高效適配的H5：https://isux.tencent.com/how-to-make-webpage-fit-screen.html?utm_medium=hao.caibaojian.com&utm_source=hao.caibaojian.comcss3

移動端 Web 開發踩坑之旅：https://zhuanlan.zhihu.com/p/26141351?utm_medium=hao.caibaojian.com&utm_source=hao.caibaojian.comgit

佈局方法：github

一、rem和百分比流體佈局的對比，以及爲什麼要選用rem來作移動端適配佈局：http://isux.tencent.com/web-app-rem.html http://121.40.99.17/global/rem-phone.html（demo）

淘寶m站首頁的動態實現：http://segmentfault.com/a/1190000003690140 http://www.imooc.com/article/1923(sass實現移動端rem自適應)

二、Flex彈性盒模型（伸縮式佈局）：http://www.imooc.com/article/3735

http://www.cnblogs.com/acmilan/archive/2012/03/02/2377812.html（舊版）

flexbox佈局：http://www.w3cplus.com/css3/flexbox-basics.html（新版）

Flex佈局新舊混合寫法詳解（兼容微信）：http://www.imooc.com/article/2073

flex.css快速入門，極速佈局：http://gold.xitu.io/post/582d991cc4c9710054407dc3?utm_medium=hao.caibaojian.com&utm_source=hao.caibaojian.com

三、CSS3引入的"vm"和"vh"基於寬度/高度相對於窗口大小，"vm"="view width"，"vh"="view height"，以上咱們稱爲視窗單位容許咱們更接近瀏覽器窗口來定義大小。1vh等於1/100的視口高度。例如，瀏覽器高度600px, 1vh=600px/100=6px。同理，若是視口寬度爲1000px，1vw=1000px/100=10px。vh和vm依據於視口的高度和寬度，相對的，vmin和vmax則關於視口高度和寬度二者的最小或者最大值。好比，瀏覽器的寬度設置爲1200px，高度設置爲700px， 1vmin=7px，1vmax=12px。若是寬度設置爲800px,高度設置爲1000px, 1vmin就等於8px, 1vmax則爲10px。作移動頁面開發時，若是使用 vw、wh 設置字體大小（好比 5vw），在豎屏和橫屏狀態下顯示的字體大小是不同的。因爲 vmin 和 vmax 是當前較小的 vw 和 vh 和當前較大的 vw 和 vh。這裏就能夠用到 vmin 和 vmax，使得文字大小在橫豎屏下保持一致。

4.
CSS3-Media Query的兩種應用響應式佈局的方式：
(1)在頭部head標籤中，引用外聯樣式link標籤中添加media="only screen and (max-width: 480px)"
(2)在樣式style標籤中添加：@media screen and (min-width: 480px){樣式屬性}

五、最新Grid網格佈局：https://gridbyexample.com/

六、在微信中提示用戶跳轉時的操做：

//智能機瀏覽器版本信息
var browser = {
    versions: function() {
        var u = navigator.userAgent, app = navigator.appVersion;
        return {
            //移動終端瀏覽器版本信息
            trident: u.indexOf('Trident') > -1, //IE內核
            presto: u.indexOf('Presto') > -1, //opera內核
            webKit: u.indexOf('AppleWebKit') > -1, //蘋果、谷歌內核
            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐內核
            mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否爲移動終端
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios終端
            android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android終端或者uc瀏覽器
            iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否爲iPhone或者QQHD瀏覽器
            iPad: u.indexOf('iPad') > -1, //是否iPad
            webApp: u.indexOf('Safari') == -1 //是否web應該程序，沒有頭部與底部
        };
    }(),
    language: (navigator.browserLanguage || navigator.language).toLowerCase()
};

$("#downloadBtn").on("click", function(e){
    if(isWeiXin()){
        $("#mask").show().find("p").text("點擊右上角，在瀏覽器中打開後，下載應用");
        $("html, body").css("overflow", "hidden");
        $("body").on("touchmove", function(e){  //修復iOS瀏覽器下存在的滾動條
            e.preventDefault();
        });
    }
    else{
        if (browser.versions.ios || browser.versions.iPhone || browser.versions.iPad) {
            window.location="https://itunes.apple.com/cn/app/lin-kong-gang-xin-wen/id1120591893?mt=8";
        }
        else if (browser.versions.android) {
            window.location="http://121.43.104.166/download/lkg.apk";
        }
    }
});

$("#mask").on("click", function(){
    $(this).hide().find("p").text("");
    $("html, body").css("overflow", "auto");
    $("body").off("touchmove");
});

//判斷是不是微信瀏覽器
function isWeiXin(){
    var ua = window.navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i) == 'micromessenger'){
        return true;
    }
    else{
        return false;
    }
}

7.JS判斷移動設備最佳方法並實現跳轉至手機版網頁：http://www.cnblogs.com/mrdoor/p/5560775.html

8.JS判斷是否爲移動端訪問，跳轉到對應的移動端網頁：

function checkMobile(){    
            var isiPad = navigator.userAgent.match(/iPad/i) != null;   

            if(isiPad){    
                return false;    
            }    
            var isMobile = navigator.userAgent.match(/iphone|android|phone|mobile|wap|netfront|x11|java|opera mobi|opera mini|ucweb|windows ce|symbian|symbianos|series|webos|sony|blackberry|dopod|nokia|samsung|palmsource|xda|pieplus|meizu|midp|cldc|motorola|foma|docomo|up.browser|up.link|blazer|helio|hosin|huawei|novarra|coolpad|webos|techfaith|palmsource|alcatel|amoi|ktouch|nexian|ericsson|philips|sagem|wellcom|bunjalloo|maui|smartphone|iemobile|spice|bird|zte-|longcos|pantech|gionee|portalmmm|jig browser|hiptop|benq|haier|^lct|320x320|240x320|176x220/i)!= null;   

            if(isMobile){ 
                //移動端的處理邏輯
                return true; 
            }    
            return false;    
        }   

checkMobile();