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 指定为 640 像素。(innerWidth:640, innerHeight:464) iPhone 纵向宽度为 320px。这就是为什么它正在运行。

所以你有两个选择：你可以将宽度和高度设置为百分比，或者使用 javascript 检测用户是在桌面还是移动设备上，并相应地设置宽度和高度。

于 2013-02-07T20:53:35.533 回答