常用移动设备媒体查询条件
/*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-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1){}
/*iPhone*/
/*Landscape*/
@media screen and (max-device-width: 480px) {}
/*iPhone 5*/
@media screen and (device-aspect-ratio: 40/71) {}
/*iPhone 6 Portrait*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) {
}
/*iPhone 6 landscape*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) {
}
/*iPhone 6+ Portrait*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) {
}
/*iPhone 6+ landscape*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) {
}
/*iPhone 6 and iPhone 6+ portrait and landscape*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px){
}
/*iPhone 6 and iPhone 6+ portrait*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : portrait){
}
/*iPhone 6 and iPhone 6+ landscape*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : landscape){
}
/*Portrait*/
@media screen and (max-device-width: 320px) {}
Blackberry Torch
@media screen and (max-device-width: 480px) {}
Samsung S3
@media only screen and (-webkit-device-pixel-ratio: 2) {}
Google Nexus 7
@media screen and (device-width: 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-width: 320px) and (device-height: 533px) and (-webkit-device-pixel-ratio: 1.5) {}
Galaxy Tab 10.1
/*Landscape*/
@media (max-device-width: 1280px) and (orientation: landscape) {}
桌面
320px
@media screen and (max-width: 320px) {}
640px
@
media screen and (max-width: 640px) {}
800px
@media screen and (max-width: 800px) {}
1024px
@
media screen and (max-width: 1024px) {}
1028px
@media screen and (max-width: 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; width:100%; z-index:990}
.landscape .iphone {background-image:url(../../../img/weixin/invitation/iphone.png);background-repeat: no-repeat;width: 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 {width: 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;
width: 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 {
width: 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;
width: 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能不用就不用,切记！！！