媒体查询iphone4,5,6以及更高

-------------------------------------------安卓适配 开始------------------------------------------

关于安卓机的移动端设备适配问题？

安卓机设备众多，在网上也不太容易知道此设备的长宽，并且点陈数比跟苹果不同。如一个安卓机的是1080X1920，可是它的实际物理尺寸却不是/2获得。

解决办法，2步：

1，在调试页面中，用js获得设备的长宽。

$(function(){	
		var this_screen_width= $(window).width();
		var this_screen_height= $(window).height();
		alert("设备宽："+this_screen_width);
		alert("设备高："+this_screen_height);
})

2，而后，把尺寸拿过来，写下面的媒体查询。

@media (min-width: 360px) {
    				#roll dd .code{
    					width: 120px !important;
    					left: 125px !important;
    					top:39px !important;
    					font-size: 11px !important;
    				}
				}

-------------------------------------------安卓适配 结束--------------------------------------------

/* iphone4*/
@media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2){ 
.dialog-agreement-con{
height: 45%;/* iphone4*/
}
} 

;/* iphone5*/
@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){ 
.dialog-agreement-con{
height: 55%;/* iphone5*/
}
} 

/* iphone6竖屏*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) { 
.dialog-agreement-con{
height: 60%;/* iphone6竖屏*/
}
}

/* iphone6 plus竖屏*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) { 
.dialog-agreement-con{
height: 60%;/* iphone6 plus竖屏*/
}
}
.dialog-agreement-con{
overflow-y:scroll; 
margin-bottom: 2rem;
}

 

 

 

CSS判断横屏竖屏
@media screen and (orientation: portrait) {
/*竖屏 css*/
}
@media screen and (orientation: landscape) {
/*横屏 css*/
}

JS判断横屏竖屏
//判断手机横竖屏状态：
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
if (window.orientation === 180 || window.orientation === 0) {
alert('竖屏状态！');
}
if (window.orientation === 90 || window.orientation === -90 ){
alert('横屏状态！');
} 
}, false);
//移动端的浏览器通常都支持window.orientation这个参数，经过这个参数能够判断出手机是处在横屏仍是竖屏状态。

// 横屏监听 var updateOrientation = function(){ if(window.orientation=='-90' || window.orientation=='90'){ $('.landscape-wrap').removeClass('hide'); console.log('为了更好的体验，请将手机/平板竖过来！'); }else{ $('.landscape-wrap').addClass('hide'); console.log('竖屏状态'); } }; window.onorientationchange = updateOrientation;