移动端开发

常用移动设备媒体查询条件

/*iPone4*/

@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {}  

/*iPhone 3G*/

@media screen and (device- 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1){}

/*iPhone*/

/*Landscape*/

@media screen and (max-device- 480px) {}

/*iPhone 5*/

@media screen and (device-aspect-ratio: 40/71) {}

/*iPhone 6 Portrait*/

@media only screen and (min-device- 375px) and (max-device- 667px) and (orientation : portrait) {

}

/*iPhone 6 landscape*/

@media only screen and (min-device- 375px) and (max-device- 667px) and (orientation : landscape) {

}

/*iPhone 6+ Portrait*/

@media only screen and (min-device- 414px) and (max-device- 736px) and (orientation : portrait) {

}

/*iPhone 6+ landscape*/

@media only screen and (min-device- 414px) and (max-device- 736px) and (orientation : landscape) {

}

/*iPhone 6 and iPhone 6+ portrait and landscape*/

@media only screen and (max-device- 640px), only screen and (max-device- 667px), only screen and (max- 480px){

}

/*iPhone 6 and iPhone 6+ portrait*/

@media only screen and (max-device- 640px), only screen and (max-device- 667px), only screen and (max- 480px) and (orientation : portrait){

}

/*iPhone 6 and iPhone 6+ landscape*/

@media only screen and (max-device- 640px), only screen and (max-device- 667px), only screen and (max- 480px) and (orientation : landscape){

}

/*Portrait*/

@media screen and (max-device- 320px) {}   

Blackberry Torch

@media screen and (max-device- 480px) {}   

Samsung S3

@media only screen and (-webkit-device-pixel-ratio: 2) {}    

Google Nexus 7

@media screen and (device- 600px) and (device-height: 905px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) {}  

Samsung Galaxy S3

@media only screen and (-webkit-device-pixel-ratio: 2) {}    

Samsung Galaxy S2

@media screen and (device- 320px) and (device-height: 533px) and (-webkit-device-pixel-ratio: 1.5) {}      

Galaxy Tab 10.1

/*Landscape*/

@media (max-device- 1280px) and (orientation: landscape) {}

桌面

320px

@media screen and (max- 320px) {} 

640px

@

media screen and (max- 640px) {}    

800px

@media screen and (max- 800px) {} 

1024px

@

media screen and (max- 1024px) {}  

1028px

@media screen and (max- 1028px) {}

/*ipad*/

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)  { }

/*iPhone height*/

var appHeight=document.body.scrollHeight;

if(appHeight<=480)

         {

             console.log("4s");

         }

         else if(appHeight<=568){

             console.log("5/5s/5c");

         }

         else if(appHeight<=667){

             console.log("6");

         }

         else if(appHeight<=736){

             console.log("6p");

         }

/**禁止手机旋转/

html：<div class="landscape" id="landscape" style="display: none">

    <div class="iphone"></div>

    <div class="iphone_text">请将屏幕竖向浏览</div>

</div>

css：

@-webkit-keyframes zhuan {

    0% {

        transform: rotate(0deg);

        -ms-transform: rotate(0deg);

        -moz-transform: rotate(0deg);

        -webkit-transform: rotate(0deg);

        -o-transform: rotate(0deg)

    }

    50% {

        transform: rotate(-90deg);

        -ms-transform: rotate(-90deg);

        -moz-transform: rotate(-90deg);

        -webkit-transform: rotate(-90deg);

        -o-transform: rotate(-90deg)

    }

    100% {

        transform: rotate(0deg);

        -ms-transform: rotate(0deg);

        -moz-transform: rotate(0deg);

        -webkit-transform: rotate(0deg);

        -o-transform: rotate(0deg)

    }

}

@keyframes zhuan {

    0% {

        transform: rotate(0deg);

        -ms-transform: rotate(0deg);

        -moz-transform: rotate(0deg);

        -webkit-transform: rotate(0deg);

        -o-transform: rotate(0deg)

    }

    50% {

        transform: rotate(-90deg);

        -ms-transform: rotate(-90deg);

        -moz-transform: rotate(-90deg);

        -webkit-transform: rotate(-90deg);

        -o-transform: rotate(-90deg)

    }

    100% {

        transform: rotate(0deg);

        -ms-transform: rotate(0deg);

        -moz-transform: rotate(0deg);

        -webkit-transform: rotate(0deg);

        -o-transform: rotate(0deg)

    }

}

.landscape {display: none; height: 100%}

@media screen and (orientation: landscape) {

    .landscape {display: block;      background-color: #c79560;    position:absolute;       100%; z-index:990}

    .landscape .iphone {background-image:url(../../../img/weixin/invitation/iphone.png);background-repeat: no-repeat; 73px;height: 109px;   position: absolute;      left: 50%;      top: 50%;margin-top: -54px;   margin-left: -36px;background-size: 73px 109px;animation: zhuan 1.5s;-moz-animation: zhuan 1.5s;       -webkit-animation: zhuan 1.5s;   -o-animation: zhuan 1.5s; -webkit-animation-iteration-count: infinite;-webkit-animation-delay: 0.3s}

    .landscape .iphone_text { 173px;height: 29px;       text-align: center;      position: absolute;      left: 50%;top: 50%;     margin-top: 71px;margin-left: -86px;color: #fff}

    .content {display: none    }

}

@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/4s */

    #s2-new{

        background:url("../../../img/weixin/invitation/P4-new-iphone4.png");

        background-repeat: no-repeat;

        background-size:100% 100%;

    }

}

.iphone {

    background-image: url(../../../img/weixin/invitation/iphone.png);

    background-repeat: no-repeat;

    73px;

    height: 109px;

    position: absolute;

    left: 50%;

    top: 50%;

    margin-top: -54px;

    margin-left: -36px;

    background-size: 73px 109px;

    animation: zhuan 1.5s;

    -moz-animation: zhuan 1.5s;

    -webkit-animation: zhuan 1.5s;

    -o-animation: zhuan 1.5s;

    -webkit-animation-iteration-count: infinite;

    -webkit-animation-delay: 0.3s;

}

.iphone_text {

    173px;

    height: 29px;

    text-align: center;

    position: absolute;

    left: 50%;

    top: 50%;

    margin-top: 71px;

    margin-left: -86px;

    color: #fff;

}

.landscape {

    display: block;

    background-color: #f15145;

    position: absolute;

    100%;

    z-index: 990;

    height: 100%;

    top: 0;

}    

js：

 window.addEventListener('orientationchange', function(event){

        if ( window.orientation == 180 || window.orientation==0 ) {

           $("#landscape").hide();

        }

        if( window.orientation == 90 || window.orientation == -90 ) {

            $("#landscape").show();

        }

    });

                                                                                

移动端补充

html页面head部分中title下引入

<!-- 视图窗口，移动端特属的标签。 -->

<meta name="viewport"  content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />

<!-- 避免IE使用兼容模式 -->

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->

<meta name="HandheldFriendly" content="true">

    然后引入reset.css,是对所有的Html标签和css样式进行格式化的以及重新定义字体大小和rem的标准的,手机端的页面，上下位置用rem,计算方法：拿PSD上的px尺寸除以30得到的就是rem值，左右位置：需要固定的用百分比固定,依据iphone 6 的尺寸计算,需要标准大小的用rem给宽定值，和美工商量好,PSD一律用iphone 6 的模板来做,还有就是能用margin的不要用position,能用padding的不要用margin,能不用padding就不用,因为容易引起页面塌方,其他的就是一些琐碎的事情了,基本到你们做项目的时候才会发现,还有就是兼容问题,还有就是一些修改类的问题了，手机端通用的内核是webkit内核,只要谷歌上的测试没问题,其他都不会出问题,除去那些修改内核的浏览器比如UC,position能不用就不用,切记！！！