/* 兼容問題*/
@media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2){
.dialog-agreement-con{
height: 45%;/* iphone4*/
}
}
@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){
.dialog-agreement-con{
height: 55%;/* iphone5*/
}
}
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) {
.dialog-agreement-con{
height: 60%;/* iphone6豎屏*/
}
}
@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;