媒體查詢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;