Css @media用於移動設備和最大寬度桌面窗口

實際上，我有一個Web窗口小部件，當窗口寬度小於max-width屬性時應該進行轉換。Css @media用於移動設備和最大寬度桌面窗口

這應該適用於移動設備和重新調整大小的桌面瀏覽器窗口。

我嘗試了這些場景

/* works only for mobile devices but not for re-sized desktop window */ 
    @media only screen and (max-device-width: 768px) { ... } 

    /* works only for re-sized desktop but not for mobile devices */ 
    @media only screen and (max-width: 768px) { ... } 

    /* works only for re-sized desktop window but not for mobile devices*/ 
    @media only screen and (max-device-width: 768px), (max-width: 768px) { ... }

有沒有一種方法，以實現移動設備和具有寬度小於768px小的桌面瀏覽器窗口相同的行爲？

來源

2014-09-26 Lucian Enache

您是否已將視口元素添加到您的HTML？ – 2014-09-26 12:08:10

@media屏幕和（最大設備寬度：768px）{...}使用此 – 2014-09-26 12:12:04

@ ralph.m那是我錯過了，請創建一個答案，以便我可以接受它。 – 2014-09-26 12:12:22

使用這種會在手機上工作，以及窗口

@media all and (max-device-width: 768px) { 
... 
}

和meta標籤在頭

<meta name="viewport" content="width=device-width, initial-scale=1">

來源

2014-09-26 12:15:00

你有頭前或標題後添加此代碼？

<meta name="viewport" content="width=device-width, initial-scale=1">

來源

2014-09-26 12:29:27 Dharmana

把下面的元標記您的HTML頭標記

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

及以下，這將給你的結果低於768寬度響應佈局在兩個瀏覽器和移動設備的mediaquery。

/*Mobile Portrait and Landscape*/ 
@media only screen and (max-width: 768px) { .. }

如果你想看到你的IE瀏覽器6-8的響應行爲也那麼你需要到respond.js連接到你的HTML頭部分，下面是你可以下載它的鏈接。

https://github.com/scottjehl/Respond

感謝， Mohsinali赤帝。

來源

2014-09-26 12:48:54

Css @media用於移動設備和最大寬度桌面窗口

回答

相關問題