Mobile Phone page Media query phone height width

First use JQ to get the phone's width high

Alert (window.screen.width+ "," +window.screen.height+ "; +$ (window). Width () + ', ' +$ (window). Height ());

where $ (window). Height () is the screen height of the phone px My is Huawei Imagine 5 This value is 923 because the height of the design drawings is 1070px and the Apple phone is much larger than this height is about 1130-1100, so use 1070-bit tipping point

@media screen and (max-height:1070px) {

Here is the style of the residue Android phone height less than 1070

. p3-flower{
Width:230px;height:221px;z-index:10;
position:absolute;top:0%;left:19%;
}}
@media screen and (min-height:1070px) {//This is the height of the apple and the 1070 notation
. p3-flower{
Width:230px;height:221px;z-index:10;
position:absolute;top:6%;left:19%;
}
Here I have detected the screen height of the phone, but also can detect the width of the screen @media screens and (min-width:640px) {} Media query is profound in addition to query the screen can also query the other specific I will not, we can find more information Note: The style of media query is also an element will have more than one set of styles must be written in the media query inside, not at the end of writing a set because the media query before the rendering, but to the back will be rendered, this is a big pit, I was in the test is to make this mistake wasted a lot of time

Mobile Phone page Media query phone height width