Question

我在为ipad和智能手机编写网站时遇到两个问题（在我的情况下，iphone 5s）。

在多个浏览器中，以下代码适用于视频背景。 没有检查IE，因为我没有窗户，但我稍后会担心。
。
但是，当在ipad上显示网站时，视频位于整个网站的中心位置（所以它完全忽略了safari的视口，看到你必须向下滚动的背景，然后你会看到它背后的内容＃39; s [正确]放在那里）。该视频不会向用户＆nbsp;＆＃39;向下滚动（因此它基本上停留在视口内的相同位置，而不是网站的整个高度）。
在智能手机上显示索引页面（使用＆＃39;继续浏览网站＆＃39;按钮）时，按钮/ href链接无效。在其他浏览器中它可以工作（ipad / safari（笔记本电脑）/ chrome / firefox）。点击按钮时，它没有做任何事情。

有没有办法解决这些问题？

HTML：

<video autoplay loop poster="http://demosthenes.info/assets/images/polina.jpg" id="bgvid">
    <source src="http://demosthenes.info/assets/videos/polina.webm" type="video/webm">
    <source src="http://demosthenes.info/assets/videos/polina.mp4" type="video/mp4">
</video>

<a href="main.html">
    <div id="verder">
        <p>verder naar de website</p>
    </div>
</a>

CSS：

video { 
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;

    position: fixed;
    left: 0;
    bottom: 0;
    display:block;
    z-index: -100;

    background-color:#fff;
    background:url(../img/schrijven.jpg) no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    /*background-position: 30% 50%;*/
}

div#verder{ 
    height:60px;
    width:321px;
    background: rgba(0,0,0,0.3);
    color: white;
    margin: 0; padding: 5px;
    float: right;
    border:#ffffff solid 1px;
    border-radius:10px;

    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    position:absolute;
    bottom: 25px;
    right: 25px;
}

div#verder:hover{
    background: rgba(168,225,210,0.3);
}

div#verder:active{
    /* koraal background: rgba(249,164,151,0.3); */
    background: rgba(156,149,145,0.3);
}

div#verder a{
    text-decoration:none;
}

div#verder p{
    font-family:'open_sanslight';
    font-size:20px;
    line-height:50px;
    color:#ffffff;
    margin: 0; padding: 0;
    text-align: center;
}

可在www.divergencepr.nl

编辑1 ：从iPad上添加了两个屏幕截图，以便您可以看到我的问题究竟是什么。我不认为视频正在播放，但现在可能是因为我的互联网连接。我认为这个问题与对齐有关，因为当你转到其他页面时（不长），背景是可见的，但图像上方和下方都有黑条。但是，当我在ipad视口上更改background-position没有任何更改时。 Landing page, no video or background visible Scrolled down, there's the background!

编辑2 ：在Chrome上测试Android智能手机上的按钮，按钮也不在那里工作。奇怪的是，它可以在我的ipad上工作，而这是一个移动设备＆＃39;太？

Answer 1

我现在和我在一起ipad。我可以帮你解决问题，但我不理解这个

从我的iPad中添加了两个屏幕截图，以便您可以看到我的问题究竟是什么。我不认为视频正在播放，但现在可能是因为我的互联网连接。我认为这个问题与对齐有关，因为当你转到其他页面时（不长），背景是可见的，但图像上方和下方都有黑条。但是，当我改变背景位置时，我的ipad视口没有任何变化。

你能用指针做截图有什么问题吗？

ipad上的背景视频没有固定＆amp;智能手机上的href链接不起作用

1 个答案: