Question

我正在组建一个网站，我注意到我的fancybox内容有两个问题：首先，当在移动设备（例如Android）上查看网站时，应该覆盖整个页面的黑色透明fanycbox背景仅覆盖约75％的页面。其次，fancybox内的内容似乎只占fancybox的50％而不是fancybox的100％ - 就好像所有内容都在宽度为50％的div中。

要查看我正在谈论的内容（以及相关代码），您可以访问Android设备上的网站（www.mytrailapp.com），然后点击任何页脚链接（例如，关于）。以下是“关于”页面的代码供您参考：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="application/xml; charset=utf-8">
<html lang="en">
<head>
<title>Trail | About</title>

<style>
body {
height:100%;
width: 100%;
margin: 0;
padding: 0;
background-color: white;

font-family: sans-serif;
}
</style>
</head>

<body>

<center><b>About Trail</b></center><br>

Trail was designed to be a new way for people to experience their past adventures. Rather than being constrained by any one social media platform, we believe that people should have an easy, intuitive way to access a scrapbook of their pictures, tweets, and videos in one place. We think Trail's unique map interface will give a greater depth and context to our users' favorite moments.<br><br>

Further, unlike a social network, Trail was founded with privacy at its core.  Trail's founders wanted to create a fun, but safe and personal place for users to re-live their past experiences.  While it's possible for users to selectively share aspects of their Trails with one another, sharing of Trail content is neither the primary purpose nor goal of Trail.  Trail is primarily meant to be yours, and yours alone.
</body>
</html>

如果用户点击页脚中的“关于”链接，则会打开“关于”页面，其中包含以下代码：

<a href="about.html" id="about" style="color:white; text-decoration: none;">About</a>

以及以下关联的jQuery：

$("#about").fancybox({
    'width'         : 750,
    'height'            : 750,
    'autoScale'         : false,
    'transitionIn'      : 'elastic',
    'transitionOut'     : 'elastic',
    'type'          : 'iframe',
});

我非常感谢解决这两个问题的任何帮助。我应该注意到，我并没有有意识地尝试以任何方式优化网站以进行移动查看，而是我碰巧检查了移动设备上的网站，看到了这些问题，并试图解决它们而没有运气。< / p>

谢谢，

Fancybox内容无法在移动设备上显示

0 个答案: