我正在爲手機和桌面創建應用程序。有些資產我不想顯示,或者在移動設備上加載。使用Bootstrap的responsive design有一個標籤hidden-phone
用於在手機上隱藏資產。但是,它們似乎仍然在後臺加載並使用帶寬。有沒有辦法來防止這種情況?Bootstrap隱藏手機資產仍然在手機上加載
0
A
回答
3
我遇到了與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
0
你是否在你的頭中包含視口標籤?
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
如果不是,您可能會渲染到1024px寬,這將影響輸出。此外,尺寸確定基於屏幕分辨率,而不是使用的設備類型。
如果你想多詢問瀏覽器,這需要用JS完成。我在幾個地方這樣做,並且以有限的方式將類注入到HTML元素中,以用於特定於設備/瀏覽器的目標。你也可以看看Modernizr。
給出下面的意見,和你的目標,你不希望加載的移動瀏覽器的iframe,我會建議使用JavaScript來測試一個非移動平臺,並通過JS注入你的iframe,而比使用Bootstrap「隱藏」內容。
相關問題
- 1. 在手機上隱藏Bootstrap子菜單
- 2. MP4視頻仍然隱藏在手機上Flex應用
- 3. 在手機上下載資產包
- 4. 如何在手機上隱藏頁腳
- 5. 如何在手機上隱藏元素?
- 6. 在手機上隱藏圖片
- 7. Bootstrap在手機上隱藏了一些colls
- 8. 隱藏的fancybox觸發頁面加載在手機
- 9. 使單槓隱藏在手機網站
- 10. 將列隱藏在手機中
- 11. 在手機中隱藏圖片
- 12. 在手機上停止javascript加載
- 13. 在手機上預加載HTML5視頻
- 14. Mongo在手機上加載時出錯
- 15. 在手機上堆疊Bootstrap carousel物品?
- 16. Bootstrap列在手機上重疊文本
- 17. Bootstrap列在手機上互相排列
- 18. bootstrap在手機上沒有中斷
- 19. Twitter Bootstrap:在手機上堆疊導航
- 20. Bootstrap 4 navbar在手機上重疊
- 21. Bootstrap Dropdown不會在手機上展開
- 22. Bootstrap不在我的手機上工作
- 23. Bootstrap 3將隱藏的div仍然加載圖像
- 24. Bootstrap v2:隱藏的代碼是否仍然加載?
- 25. 隱藏用於手機的內容
- 26. HTML手機 - 強制軟鍵盤隱藏
- 27. 隱藏手機safari地址欄
- 28. 從手機瀏覽器隱藏腳本
- 29. 旋轉手機時隱藏鍵盤
- 30. 隱藏內容On Only手機
注意,你可能要指定最大規模的類似3,因此用戶可* *放大查看一些圖片破越好.. – Tracker1
我正在包括視口。同樣的問題。我應該提到,我不想在移動時加載的內容位於iframe中。 – Alexis
手頭上的問題..對象/視圖仍然會加載...你提到的類是關於可見性的......如果你不想加載,那麼我會建議使用JavaScript來測試和注入支持平臺的iframe。 – Tracker1