如何讓HTML代碼片段只顯示桌面搜索？

我在我的作品網站上使用了很少的HTML框。如何讓HTML代碼片段只顯示桌面搜索？

問題是，我們需要將HTML顯示給計算機瀏覽器，但我們不希望它顯示在移動設備上，因爲當移動設備接收到HTML片段時，這些HTML片段無法正常顯示。

有沒有人有任何想法？

來源

2015-04-22 Leonard Treman

這是一段代碼，就我所知，我無法使用CSS。這有點像wordpress或者一個建設者網站，你可以把代碼放到指定的HTML框中。目標是排除一些內容被有形設備看到。 –

使用媒體查詢？在一定的寬度下，你可以在這些HTML塊上顯示：none。 – chrismillah

使用PHP查詢設備大小，然後相應地回顯HTML，或使用CSS媒體查詢重新設置現有HTML –

查看CSS中的媒體查詢。藉助它，您可以隱藏小型設備上的HTML元素。

編輯：您可以直接在HTML元素上添加樣式。但是，這是骯髒的HTML ...

來源

2015-04-22 21:17:03 Jonathan

CSS似乎無法被我正在使用的html框識別。它確實承認PHP。 –

@LeonardTreman PHP在服務器上運行，客戶端框無關緊要。 – Barmar

使用PHP，您無法從客戶端訪問太多信息。 JavaScript將成爲這裏的一種方式。使用php的唯一方法是檢查瀏覽器類型，但這對於代碼片段來說非常重要。 – Jonathan

你需要讓你的CSS中使用的媒體查詢在特定的屏幕尺寸增加display: none的元素

例子：

@media only screen AND (max-width: 736px) { // 736px is the iPhone 6+ max 
    .mobileHidden { // rename to whatever 
    display: none; // doesn't display in the browser. 
    } 
}

你可以將最大寬度更改爲任何你想要的，並將類名更改爲任何內容。然後，您只需將該類添加到要隱藏的元素，然後完成。

CSS Media Query Standard Sizes

來源

2015-04-22 21:19:53 Stewartside

任何和所有的CSS都顯示爲文本。爲我們編寫網站的程序不能識別css，並且根據我所知，無法附加單獨的樣式表。 –

如果設備不支持css，那麼您必須執行服務器端檢測並調整您提供的任何服務。例如'如果（$ device =='mobile'）{發送移動版本} else {發送桌面版本}' –

因爲它似乎像任何PHP或JavaScript被剝離出來我會是什麼樣的未來是看到，如果你可以利用任何的網站上現有的風格 - 尤其是如果該網站已經響應。在減少瀏覽器窗口時是否存在隱藏或改變的元素？

使用您的瀏覽器開發工具（IE和FF中的F12（Chrome中的Ctrl + Shift + i））檢查CSS並查看CSS中是否已有任何媒體查詢。這是一個很長的鏡頭，但可能會有像斯圖爾特賽爾暗示的那樣。如果是這樣，您可以將該查詢中定位的類之一添加到HTML框中的內容包裝div。再次使用從Stewartside的例子類爲清楚：

<div class="mobileHidden">Do what you want here</div>

否則，你可能在與管理CMS的人取得聯繫，說明您的需求並詢問他們是否可以添加一些樣式的CSS。

來源

2015-04-22 22:03:35 wunth

我可以試試，明天上班時我會這樣做。我知道模板thingy使用div類的事實，所以我會認爲這會起作用。 –

我認爲這些盒子是一種所見即所得的產品，它具有源視圖？我很可能不需要告訴你，但爲了以防萬一：當你嘗試這個時，確保你使用編輯器的'source'或'html'視圖（就像這裏的其他建議一樣），否則你會得到一切作爲文本輸入，不作爲標記或代碼處理。 – wunth

My Code Went Here

事情沒有奏效。 –

如何讓HTML代碼片段只顯示桌面搜索？

回答

相關問題