0

html5bp からのビューポート行がカラーボックスで問題を引き起こしている理由を理解するのに苦労しています。iPhone 4 で表示すると問題が発生します。ポップアップ モーダルの YouTube ビデオが画面に対して大きすぎます。デスクトップではすべて問題ありません。

<meta name="viewport" content="width=device-width; initial-scale=1.0;">

この行を使用しない場合、カラーボックス モーダルはうまく機能します。ただし、私のページはモバイル用に適切にスケーリングされていません。

この行を含めると、カラーボックス モーダルが画面に対して大きすぎます。

両方の動作を示すリンクの例を次に示します。

http://ivantown.com/cbtest/good.html

http://ivantown.com/cbtest/bad.html

コードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

   <meta name="viewport" content="width=device-width; initial-scale=1.0;">

<title>colorbox youtube</title>
<link rel="stylesheet" type="text/css" href="colorbox.css" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="jquery.colorbox-min.js"></script> 
<script>
$(document).ready(function(){
$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:464});
});
</script> 
</head>

<body>

<h2>colorbox youtube</h2>

<a class="youtube" href="https://www.youtube.com/embed/C0DPdy98e4c?autoplay=1">Link1</a>

</body>
</html>

助けてくれてありがとう。ここのコミュニティの長年の恩人ですが、最初の質問です。

4

1 に答える 1

1

あなたの問題はここにあります

$(document).ready(function(){
$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:464});
});

コードに注意を払うと、カラーボックスの innerWith を 640px に指定しています。(innerWidth:640, innerHeight:464) iPhone縦幅は320pxです。だからこそ駆け抜けるのです。

したがって、2 つのオプションがあります。幅と高さをパーセンテージで設定するか、JavaScript を使用してユーザーがデスクトップまたはモバイル デバイスを使用しているかどうかを検出し、それに応じて幅と高さを設定します。

于 2013-02-07T20:53:35.533 に答える