Media query Iphone6, iphone6 PLUS,JS judging device model

/* Compatibility issue * /
@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 Vertical Screen */
}
}
@media only screen and (min-device-width:414px) and (max-device-width:736px) and (orientation:portrait) {
. dialog-agreement-con{
height:60%;/* iphone6 plus Vertical screen */
}
}
. dialog-agreement-con{
Overflow-y:scroll;
Margin-bottom:2rem;
}

CSS Judging horizontal screen vertical screen
@media screen and (orientation:portrait) {
/* Vertical Screen css*/
}
@media screen and (Orientation:landscape) {
/* Horizontal Screen css*/
}

JS Judge Horizontal Screen vertical screen
Determine the status of the phone screen:
Window.addeventlistener ("Onorientationchange" in Window?) "Orientationchange": "Resize", function () {
if (window.orientation = = = | | window.orientation = = 0) {
Alert (' Vertical screen state! ‘);
}
if (window.orientation = = = | | window.orientation = =-90) {
Alert (' Horizontal screen state! ‘);
}
}, False);
Mobile browser generally support window.orientation This parameter, through this parameter can determine whether the phone is in a horizontal screen or vertical screen state.

Horizontal screen Monitoring
var updateorientation = function () {
if (window.orientation== ' -90 ' | | window.orientation== ' 90 ') {
$ ('. Landscape-wrap '). Removeclass (' hide ');
Console.log (' For a better experience, please put your phone/tablet back on! ‘);
}else{
$ ('. Landscape-wrap '). addclass (' hide ');
Console.log (' Vertical screen status ');
}
};
Window.onorientationchange = updateorientation;

Media query Iphone6, iphone6 PLUS,JS judging device model