Javascript條件與useragent變量

我需要幫助爲2個視頻編寫條件與JavaScript。我已經搜索過，但我想我對如何設置我的變量感到困惑。我有一個視頻（閃存iframe），我想在桌面瀏覽器的網站上顯示，但我希望在移動設備上查看網站時顯示不同的視頻（非閃光燈）。Javascript條件與useragent變量

這是兩個視頻：

<html> 
    <div id="desktop_video"> 
     <iframe src="url-here" height="650" width="600" frameborder="no" scrolling="no" marginwidth="0px" marginheight="0px"></iframe> 
    </div> 

    <div id="mobile_video"> 
     <script type="text/javascript" src="http://url-here"></script> 
    </div> 
</html>

來源

2013-07-11 user2574654

說，你想顯示在480像素的最小寬度的瀏覽器在桌面上，這將是你的CSS：

#mobile_video { 
    display: none; 
} 

#desktop_video { 
    display: block; 
} 

@media only screen and (max-width: 480px) { 
    #desktop_video { display: none; } 
    #mobile_video { display: block; } 
}

雖然桌面應該已經被阻止了，我加入了代碼以明確它是必要的。這只是一個簡單的方法來做到這一點。

來源

2013-07-12 00:29:13 Mikel

我喜歡這種方法。但是，它不適合我的iPad。移動視頻不顯示，我仍然收到Flash錯誤信息。任何見解？ – user2574654

我以爲你有其餘的設置:)嘗試添加到您的標題：還請確保你把你的iPad的大小插入到css max-width：768px（我相信）。請閱讀此處瞭解更多信息：http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ – Mikel

現在，iPad不會在桌面視頻中調用，所以不會出現Flash錯誤這很好。但它仍然不是在移動視頻中打電話，它只是空白。我必須在早上回來。謝謝你的幫助！ – user2574654

您可以使用Navigator.useragent來檢測客戶端的瀏覽器。（有很多資源在那裏，如果你搜索。）

我從javascriptkit下面一行將如果用戶使用移動設備檢查...

//returns true if user is using one of the following mobile browsers 
var ismobile=navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i)

你可以如果ismobile返回true，則顯示移動視頻（非閃光燈）。否則，你可以只顯示iframe視頻。

希望這可以幫助你獲得開始。正如我所說，有很多資源，在那裏幫助您與此解決方案，即使在SO ...

How to detect a mobile device with javascript

來源

2013-07-12 00:32:08 neo108

Javascript條件與useragent變量

回答

相關問題