Compatible with different versions of iphone and screen

/* 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:portrai　　T) {. dialog-agreement-con{height:60%; /* iphone6 Vertical screen */}} @media only screens and (min-device-width:414px) and (max-device-width:736px) and (Orientation:portra　　It) {. dialog-agreement-con{height:60%; /* iphone6 plus vertical screen */}}.dialog-agreement-con{overflow-y:scroll; margin-bottom:2rem;} CSS Judge horizontal screen vertical @media screen and (orientation:portrait) {/* Portrait css*/} @media screen and (Orientation:landscape) {/* Landscape CSS*/}JS judgment Horizontal screen Vertical screen//Judge phone screen status: Window.addeventlistener ("Onorientationchange" in window? "Orientationchange": "Resize", function () {if (Window.orientation = = 180 | | Window.orientation = = 0) {alert (' Vertical 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== ') {$ ('. LANDSCAPE-WR　　　　AP '). 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;

　　

Compatible with different versions of iphone and screen