1

だから私はこのタグを定義しました：

<meta name="viewport" content='width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no' />

私も試しました：

<meta name="viewport" content='width=device-width, initial-scale=1.0, user-scalable=no' />

Galaxy Tab 2でWebサイトをテストしていました-これにより、あらゆるタイプのダブルタップまたはピンチズームが正しくブロックされます.

しかし、方向を変えるとすぐに、再びズームインできます! ズームインしかできず、ズームアウトできないため、動作が奇妙です。ダブルタップとピンチの両方でできます。

方向を元に戻しても問題は解決しません。その後の方向の変更ごとにこの問題が発生します...

誰もこの問題を以前に見たことがありますか?

ありがとう！

チェレク

ビデオのソースを切り替えた後、それを実行.load()して新しいファイルを強制的にロードする必要があります。また、すべてのブラウザでサポートされているビデオ コーデックがないため、複数の形式を提供する必要があります。

まず、ソースを次のように設定します。

var sources = [
    {
        'mp4': 'http://video-js.zencoder.com/oceans-clip.mp4',
        'webm':'http://video-js.zencoder.com/oceans-clip.webm',
        'ogg':'http://video-js.zencoder.com/oceans-clip.ogv'
    }
    // as many as you need...
];

次に、スイッチ関数は次のようになります。

function switchVideo(index) {
    var s = sources[index], source, i;
    video.innerHTML = '';
    for (i in s) {
        source = document.createElement('source');
        source.src = s[i];
        source.setAttribute('type', 'video/' + i);
        video.appendChild(source);
    }
    video.load();
    video.play(); //optional
}

ここで動作するデモを参照してください。

これにより、ブラウザーはさまざまな形式のリストを試してみることができます。気に入った URL が見つかるまで、各 URL を調べます。各ソース要素に "type" 属性を設定すると、事前にブラウザにビデオのタイプが通知されるため、サポートしていないビデオをスキップできます。それ以外の場合は、サーバーにアクセスしてヘッダーを取得し、そのファイルの種類を特定する必要があります。

これは、ogg/theora ファイルを提供する限り、3.5 までさかのぼる Firefox でも機能するはずです。また、ページには一度に 1 つのビデオ要素しかないため、iPad でも機能します。ただし、自動再生は、ユーザーが少なくとも 1 回手動で再生をクリックするまで機能しません。

追加のクレジットとして、html5 ビデオをサポートしていない古いブラウザーの場合、ソース タグの後に、ビデオ要素にフラッシュ フォールバックを追加できます。(つまり、IE < 9 - ただし、jQuery または別の shim を使用して置き換える必要がありますaddEventListener。)

4

3 に答える 3

2

同じ問題があり、HTML5 に切り替えることで解決しました。つまり、次のことを意味します。

<!DOCTYPE html>
<html lang="en">
于 2014-03-03T13:54:12.540 に答える
1

たぶん、ここに見られるように、文書化されていない「target-densityDpi」を使用する必要があります：https ：//android.googlesource.com/platform/external/webkit/+/f10585d69aaccf4c1b021df143ee0f08e338cf31

于 2012-12-05T20:45:38.593 に答える
0

私は解決策なしで同じ問題に直面しています。論理的な結論は、最初に「user-scalable = 0」に設定したときに、ブラウザウィンドウがメタを「user-scalable = 1」にリセットしているに違いないということです。

このバグは、CSS transition3d を使用してページ コンテンツを移動し、オフ キャンバス メニュー (Google モバイルや Facebook モバイル アプリなど) の下にサイドバーを表示する場合にのみ発生します。負のマージンを使用してコンテンツをプッシュすると、テストではまったく発生しません。

私が試したことの 1 つは、ユーザーが電話の向きを変えるたびにメタ ビューポート タグを置き換えることです。ただし、実際に機能しているかどうかはわかりません。おそらく6ページのリロードごとにバグが発生するようです+横向きへの向き。\

function updateMetaOrientationChange() {
     var viewport = document.querySelector("meta[name=viewport]");

     viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;')
}
于 2013-06-05T04:06:13.363 に答える