更改手機/平板設備上的HTML

我有按鈕1和按鈕2.如果我在電腦屏幕上，我必須顯示按鈕1，而如果我在手機/平板電腦設備上，則必須顯示按鈕2。所以，我想要的東西，可以改變我的網頁中可見的HTML。有什麼像html的mediaquery？預先感謝您！更改手機/平板設備上的HTML

來源

2014-11-03 JEricaM

是的，媒體查詢可以用來得到你想要的結果。但是你在你的CSS樣式表中使用它們。

事情是這樣的：

@media only screen and (max-width : 480px) { 
    .btn-mobile-visible { 
     visibility: visible; 
    }; 

    .btn-desktop-visible { 
     visibility: hidden; 
    };  
} 

@media only screen and (min-width : 481px) { 
    .btn-mobile-visible { 
     visibility: hidden; 
    }; 

    .btn-desktop-visible { 
     visibility: visible; 
    }; 
}

然後在你的HTML你只需要添加你的按鈕的CSS類：

<button class="btn-desktop-visible">Visible in desktop</button> 
<button class="btn-mobile-visible">Visible in mobile</button>

不必要的副作用可能是，如果用戶改變的大小他/她的瀏覽器窗口 - 這可能會讓事情有點凌亂:)

來源

2014-11-03 08:33:50 aup

這是一個很好的解決方案，但是可以選擇所有移動設備/平板電腦設備嗎？我沒有定義分辨率大小。 – JEricaM 2014-11-03 08:40:08

媒體查詢使用最大/最小寬度/高度，併爲這些寬度/高度應用指定的CSS類。它恐怕沒有像「設備」那樣看待任何東西。如果你想有一個基於設備的解決方案，你應該看看一些JavaScript庫或類似http://detectmobilebrowsers.com/，然後使用jQuery或其他東西來隱藏/顯示按鈕或其他元素。這個解決方案很快就會變得相當凌亂:) – aup 2014-11-03 09:05:40

我做了@media屏幕和（最大設備寬度：600px）{}如果我在肖像，它的作品，但是被隱藏，如果我切換在橫向，該按鈕是隱藏的，但如果我再次在肖像中切換，按鈕會出現oo怎麼可能？ – JEricaM 2014-11-03 15:34:19

您可以簡單地使用CSS媒體查詢更改按鈕的可見性。或者使用像head.js這樣的庫來確定你正在使用哪種瀏覽器，然後通過javascript插入正確的按鈕。

來源

2014-11-03 08:31:22

更改手機/平板設備上的HTML

回答

相關問題