2014-03-04 49 views
0

對於我正在工作的當前項目,我遇到了一個小問題。給予div兩個特定的功能,一個用於移動,一個用於桌面

我有一段視頻需要在桌面上的燈箱中播放,並且需要在移動設備上直接從源播放。我目前正在用wordpress構建網站,並使用shotcode插件來顯示燈箱。

我想我必須做出用於移動設備的媒體特定的電話,讓特定的DIV行爲不同的移動..

任何人可以給我一些指點和幫助或一個例子,我怎麼可能解決這一問題?

+0

嘗試以下鏈接 http://stackoverflow.com/questions/16520186/how-to-detect-tablet-mobile-desktop-tv-using- javascript – Devjit

+0

偉大的我試圖解決我的問題與特定的媒體查詢,它的工作原理。我在我的css中添加了兩個查詢,並在我顯示的移動版本中添加了兩個div,並隱藏了另一個以及完整的其他方式。 – user3219418

回答

1

比方說,你有一個鏈接來打開桌面上的模式。此鏈接可以在移動設備上被隱藏與媒體查詢的幫助(我使用了一些示例類這裏來說明工作):

<a href="#modalWindow" class="show-on-desktop">Open video in modal window</a>

鏈接不應該在移動設備上顯示出來,因爲您希望立即顯示內容。對於視頻,你可以使用這樣的事情:

<div class="hidden-on-desktop" id="modalWindow">Video here</div>

在桌面上這個div應該像一個隱藏的,模態窗口,並在移動它顯示的內容。您應該在特定的媒體查詢中設置模式窗口的樣式,因爲您不希望內容在移動設備上顯示爲模式。

希望這有助於一點:)

相關問題