0

画面サイズに基づいてリンクを変更しようとしています - iframe に埋め込まれた個別のビデオ フィードを使用して、あらかじめ決められたいくつかの画面サイズに対応しているため、CSS メディア クエリを使用できません。

例えば

<iframe src="desktopVideoFeed.html" width="300" height="300">
</iframe>

に変更

<iframe src="mobileVideoFeed.html" width="200" height="200">
<iframe>

など..

私は JavaScript にあまり詳しくありませんが、この仕事には JavaScript が最適なツールだと思います。実装したいコードは次のとおりです。

window.resize(function(){
    if(screen.width <= 480){
        document.getElementByTagName('iframe').src = 'mobileVideoFeed.html';
    }else if (screen.width <= 780){
        document.getElementByTagName('iframe').src = 'tabletVideoFeed.html';
    }else if(screen.width <= 960){
        document.getElementByTagName('iframe').src = 'desktopVideoFeed.html';
    }
})

私はこれに間違った方法でアプローチしていますか?

4

2 に答える 2

0

画面幅を検出する代わりに、navigator.userAgentプロパティ (「iPad」、「iPhone」などを含むことができるため、これらのキーワードが含まれているかどうかを確認できます) を使用できます。

例: 私のはMozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.97 Safari/537.22です。

別の例: iPhone テスト:

if (/iPhone/i.test(navigator.userAgent)) ...

便利なサイト: http://detectmobilebrowsers.com/

于 2013-03-02T23:48:32.833 に答える
0

より安全な方法は、iframe の使用を完全に回避し (私にとっては、以前に iOS デバイスで何度か煩わしかった)、Javascript の代わりに CSS を使用して別の方法でページをレンダリングすることです。

<style>
/* Main CSS here, optimized for desktop. */

@media only screen and (max-width: 780px), only screen and (max-device-width: 780px)
{
/* Optimizations for tablet screen sizes */
}

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px)
{
/* Optimizations for phone screen sizes */
}
</style>

これには、HTML を使用したページ レイアウトの考え方を少し変更する必要があるかもしれませんが、最終的には簡単になるかもしれません。

于 2013-03-03T00:41:35.947 に答える