Bootstrap隱藏手機資產仍然在手機上加載

我正在爲手機和桌面創建應用程序。有些資產我不想顯示，或者在移動設備上加載。使用Bootstrap的responsive design有一個標籤hidden-phone用於在手機上隱藏資產。但是，它們似乎仍然在後臺加載並使用帶寬。有沒有辦法來防止這種情況？Bootstrap隱藏手機資產仍然在手機上加載

來源

2013-05-28 Alexis

我遇到了與Bootstrap響應實用程序相同的問題。問題在於瀏覽器會先加載所有HTML圖像，然後將Bootstrap使用的CSS規則應用於您告訴它隱藏的特定元素display:none。

一種可能的解決方案是避免使用這些實用程序，而是使用CSS background-image屬性顯示圖像。然後，您可以選擇Bootstrap與其響應式實用程序一起使用的屏幕斷點或製作自己的屏幕斷點。下面是我過去使用的一個簡化示例（一組移動圖像和一組其他圖像）。

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title></title> 
     <style> 
     #image { 
      background-image: url(largeimage.jpg); 
     } 
     @media only screen and (max-width: 480px) { 
      #image { 
       background-image: url(mobileimage.jpg); 
      } 
     } 
     </style> 
    </head> 
    <body> 
     <div id="image"></div> 
    </body> 
</html>

你可以找到更多信息關於引導斷點位置：http://getbootstrap.com/css/#grid-media-queries

來源

2013-10-08 18:30:13 Jiffy

你是否在你的頭中包含視口標籤？

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

如果不是，您可能會渲染到1024px寬，這將影響輸出。此外，尺寸確定基於屏幕分辨率，而不是使用的設備類型。

如果你想多詢問瀏覽器，這需要用JS完成。我在幾個地方這樣做，並且以有限的方式將類注入到HTML元素中，以用於特定於設備/瀏覽器的目標。你也可以看看Modernizr。

給出下面的意見，和你的目標，你不希望加載的移動瀏覽器的iframe，我會建議使用JavaScript來測試一個非移動平臺，並通過JS注入你的iframe，而比使用Bootstrap「隱藏」內容。

來源

2013-05-28 20:26:17 Tracker1

注意，你可能要指定最大規模的類似3，因此用戶可* *放大查看一些圖片破越好.. – Tracker1

我正在包括視口。同樣的問題。我應該提到，我不想在移動時加載的內容位於iframe中。 – Alexis

手頭上的問題..對象/視圖仍然會加載...你提到的類是關於可見性的......如果你不想加載，那麼我會建議使用JavaScript來測試和注入支持平臺的iframe。 – Tracker1

Bootstrap隱藏手機資產仍然在手機上加載

回答

相關問題