pc移動端適配

1、pc端頁面在移動端顯示，默認視口寬度是980px（也就是body寬度是980px），可通過meta標簽設置為需要的尺寸，比如頁面中元素最大寬度是1220px，則如下所示

<meta name="viewport" content="width=1220">

2、如果不想讓頁面有水平滾動條又有元素需要固定在屏幕底部，則可以按以下方法操作

1）給html頁面設置視口寬度

2）判斷是否為移動設備，對pc和移動設備分別設置樣式，如下：

$(function(){
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.*/), //是否為移動終端
            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 , //是否為iPhone或者QQHD瀏覽器
            iPad: u.indexOf('iPad') > -1, //是否iPad
            webApp: u.indexOf('Safari') == -1 //是否web應該程序，沒有頭部與底部
        };
    }(),
    language:(navigator.browserLanguage || navigator.language).toLowerCase()
}


    //底部定位
    var $winH=document.body.offsetHeight,$bodyH=$("body").height(),$win=$(window).height();
    //PC端
    if(browser.versions.trident || browser.versions.presto || browser.versions.webKit ||
        browser.versions.gecko ){
        if($bodyH < $win){
            $(".footer").css({"position":"fixed","bottom":"0"})
        };
    }
    //移動端
    else{
        if($bodyH < $win){
            if($bodyH<=$winH){
                $("body").css("min-height",$winH);
                $(".footer").css({"position":"absolute","bottom":"0"})
            }

        }
    }
}）

3）移動端中，很多時候對於長數字的顯示有問題（如顏色顯示和換行等），解決方法是給長數字加個a標簽等，然后再進行設置樣式

4）針對屏幕最大寬度為500的移動端頁面    @media only screen and (max-device-width: 500px){}