@media只有屏幕VS. Iframe

所以我有一點predicamenyt。如果在計算機上查看，我有一個鏈接顯示在iframe中，如果在移動設備上，則鏈接顯示在父頁面中。@media只有屏幕VS. Iframe

如果在移動設備上查看，我只希望用戶看到橫向頁面。所以，我使用下面的代碼：

<style type="text/css"> 
#warning-message { display: none; } 
@media only screen and (orientation:portrait){ 
    #wrapper { display:none; } 
    #warning-message { display:block; } 
} 
@media only screen and (orientation:landscape){ 
    #warning-message { display:none; } 
} 
</style> 

.... 

<div id="wrapper"> 
<!-- page --> 
</div> 
<div id="warning-message"> 
please turn to landscape 
</div>

但是，由於iframe，問題出現了。如果在計算機上查看，則會顯示warning-message div，而不是包裝內容，儘管計算機屏幕是橫向的。我認爲這是因爲iframe是肖像。

有沒有人知道一種方式使它在非移動設備中僅顯示包裝div內容，而不是警告消息（即將所有非移動設備有效地視爲橫向）？

我希望這個問題有道理。

在此先感謝您的幫助。

來源

2013-08-20 Matt S

不，這不可能只用CSS。你的假設是正確的，iframe本身如果高於寬度，也會觸發縱向方向規則，因爲iframe本質上是一個沙盒瀏覽器。如果您在具有「人像」尺寸的桌面瀏覽器中打開它，您會得到相同的結果。

由於您已經在檢測桌面/移動瀏覽器，所以在iframe中打開時，可以在URL中添加特殊的GET參數。將?iframe=1添加到URL中，然後在代碼中（或者如果需要，甚至在JS中）檢測此參數可以爲您的html或body元素添加額外的類。然後您可以使用這個額外的類來擴展媒體查詢規則。

說了我大量建議對你現在在做什麼 - 媒體的質疑都是關於製作網站和應用程序更動態，不限制性。禁止用戶按照自己想要的方式持握設備只會引起投訴和煩惱，如果您只是使用相同的媒體查詢來實施替代佈局，或者如果縱橫比是真的那很重要。

來源

2013-08-20 21:48:34

@media只有屏幕VS. Iframe

回答

相關問題