不同設備上的不同幀？

我在我的幾個網站上有一個頂欄，通過iframe顯示，但它在移動設備上看起來很糟糕，所以我想知道如果我可以把它放在一個div中，然後通過CSS顯示無目標div如果屏幕小於一定大小。不同設備上的不同幀？

理想的情況是在桌面上顯示一個iframe，在移動設備上顯示另一個iframe。

我想是這樣的：

@media only screen and (max-device-width : 320px) 
#div {display:none;}

我完全不知道如何用不同的來源，這是這將是對我來說是理想的解決方案顯示的iframe的想法。

希望你們能幫助我

來源

2014-01-10 user3038786

嘗試'@media只有屏幕和（MAX-設備寬度：320像素）{ #div {顯示：無;}} '儘管你可以直接瞄準'iframe'。 – putvande

@media handheld and (max-device-width : 320px) 
{ 

#div {display:none;} 

}

檢查設備寬度也和使用最多的設備寬度功能相同。

來源

2014-01-10 11:23:55

如果我理解正確，您希望根據屏幕寬度顯示不同的URL。我建議製作兩個iframe，其中一個顯示：none和另一個顯示：block。然後在屏幕小於x px時切換其顯示屬性。

是這樣的：

<style> 
iframe { 
    width: 100%; 
    height: 200px; 
} 
#mobile-iframe { 
    display: none; 
} 
@media handheld and (max-device-width : 320px) { 
    #normal-iframe { 
     display: none;   
    } 
    #mobile-iframe { 
     display: block; 
    } 
} 
</style> 

<iframe id="normal-iframe" src="http://test.com"></iframe> 
<iframe id="mobile-iframe" src="http://test.com/help/"></iframe>

實驗與在這裏：http://jsfiddle.net/zTzRA/

來源

2014-01-10 11:42:35

不同設備上的不同幀？

回答

相關問題