iPad (iOS6) の Safari では、HTML5 ビデオをページ幅の 100% に合わせて拡大縮小できません

この記事では、iPad IOS6 の Safari で拡大縮小せずに HTML5 ビデオをページ幅の 100% に表示する方法を説明します。レスポンシブな HTML5 ページでは、全幅 (100%) にすることができます。 %) 次の CSS ) を適用してビデオを表示します。ビデオの元の解像度は 480x270 です。すべてのデスクトップ ブラウザで、ビデオはアスペクト比を維持しながらページの幅全体に広がるようにサイズ変更されます。

ただし、iPad (iOS 6.0.1)、Mobile Safari、および Chrome では、ページと同じ幅の黒い四角形が表示されます。黒い四角形の中心には、ネイティブ解像度 480x270 ピクセルの小さなビデオが含まれています。

これは、iPad IOS6 の Safari が、レスポンシブ HTML5 ページのページ幅の 100% を占めるように HTML5 ビデオを拡大縮小しない例です。

例 1

以下の例では、style 属性でビデオの幅と高さを設定します。

上記のスクリプトが実行されると、Web ページにアップロードされたビデオで構成される出力が生成され、style 属性を使用して設定されたすべてのソースに適したものになります。

例 2

次の例では、位置を絶対

スクリプトが実行されると、出力ウィンドウがポップアップし、Web ページ上にビデオが表示され、すべてのソースに適したものになります。

以上がiPad (iOS6) の Safari では、HTML5 ビデオをページ幅の 100% に合わせて拡大縮小できませんの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。