如何爲筆記本電腦1024px和ipad 1024px寬度設置不同的媒體查詢？

Question

我要取決於它是否是一臺筆記本電腦屏幕或iPad的屏幕爲1,024像素寬屏幕設置不同的媒體查詢。

例如，如果有人查看我的筆記本電腦中的網站（寬度：1,024）他們應該看到的圖像，並且如果他們查看它從ipad公司（寬度：1,024）中的圖像應該被隱藏（顯示：無）。

Answer 1

如果屏幕的寬度是相同的大小，CSS不能互相我想區分它們。

您可以使用JavaScript。該platform屬性，從navigator對象，返回與平臺的瀏覽器上使用的字符串。 （即MacIntel的Win32）（用法：platform.navigator）

對於禁用和啓用的樣式表，這可能爲你工作：http://www.codechewing.com/library/how-to-disable-or-enable-a-stylesheet-in-javascript/

Answer 2

iPad的特定媒體的查詢使用下面的代碼，

如果u要隱藏IMG在1,024像素寬度，即橫向模式的iPad u可以使用類「隱藏-ME-景觀」

如果u要隱藏在ipad與橫向和縱向模式中使用類「隱藏我」

如果u想要的img隱藏在縱向模式下使用類的img「捉迷藏我畫像」

見下面的代碼爲前

/* Portrait and Landscape */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (-webkit-min-device-pixel-ratio: 1) { 
    .hide-me{ 
     display: none; 
    } 
} 

/* Portrait */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: portrait) 
    and (-webkit-min-device-pixel-ratio: 1) { 
    .hide-me-portrait{ 
     display: none; 
    } 

} 

/* Landscape */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: landscape) 
    and (-webkit-min-device-pixel-ratio: 1) { 
    .hide-me-landscape{ 
     display: none; 
    } 
} 

，你可以更多地瞭解它here

你也可以使用modernizr檢測是否用戶在使用觸摸屏設備或不和運用你的CSS相應

希望它能幫助:)

Answer 3

這裏是最好的電子xample在css中進行不同的媒體查詢？

@media only screen and (min-width: 480px) { 
 
    /* for mobile*/ 
 
    
 
} 
 

 
@media only screen and (min-width: 768px) { 
 
    /* for ipad or tablets*/ 
 

 
    
 
} 
 

 
@media only screen and (min-width: 1140px) { 
 
    
 
    /* for laptop..*/ 
 

 
}

Answer 4

你可能意味着iPad的臨其寬度爲1024px。

您可以通過檢查設備高度來檢測設備是iPad還是筆記本電腦，使用媒體查詢：iPad Pro的高度是1366px，我認爲這比任何筆記本電腦的高度都高，所以CSS會顯示像這樣：

@media screen and (min-width: 1024px) and (min-height: 1320px) { 
    /* iPad Pro */ 
} 

@media screen and (min-width: 1024px) and (max-height: 1310px) { 
    /* Laptop */ 
}