手機頁面媒體查詢手機高度寬度

標籤：

先用jq獲得手機的寬高

alert(window.screen.width+","+window.screen.height+";"+$(window).width()+‘,‘+$(window).height());

其中 $(window).height()就是手機的螢幕高度 單位px我的是華為暢想5  這個值是923因為設計圖紙的高度是1070px 而蘋果手機遠大於這個高度 大約是1130-1100之間所以就用 1070位臨界點

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

 //這裡是是渣渣安卓手機 高度小於1070的樣式

.p3-flower{
width:230px;height:221px;z-index:10;
position:absolute;top:0%;left:19%;
}}
@media screen and (min-height:1070px){//這裡是蘋果 高度高與1070的寫法 
.p3-flower{
width:230px;height:221px;z-index:10;
position:absolute;top:6%;left:19%;
}
}這裡我是檢測了手機的螢幕高度，也可以檢測螢幕的寬度的@media screen and (min-width:640px){}媒體查詢博大精深 除了可以查詢螢幕 還可以查詢其他的 具體的我也不會了 大家可以多找找資料 備忘： 媒體查詢的樣式 也就是一個元素會有多套樣式 一定要全部寫在媒體查詢裡面，不能在最後在寫一套 因為這個前面被媒體查詢渲染，但是到後面就又會渲染的，這個是大坑，我在測試的時候就是犯了這個錯誤浪費不少時間

手機頁面媒體查詢手機高度寬度