我在为ipad和智能手机编写网站时遇到两个问题(在我的情况下,iphone 5s)。
在多个浏览器中,以下代码适用于视频背景。 没有检查IE,因为我没有窗户,但我稍后会担心。
。
但是,当在ipad上显示网站时,视频位于整个网站的中心位置(所以它完全忽略了safari的视口,看到你必须向下滚动的背景,然后你会看到它背后的内容#39; s [正确]放在那里)。该视频不会向用户 '向下滚动(因此它基本上停留在视口内的相同位置,而不是网站的整个高度)。
在智能手机上显示索引页面(使用'继续浏览网站'按钮)时,按钮/ 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;
}
找到完整网站
编辑1 :从iPad上添加了两个屏幕截图,以便您可以看到我的问题究竟是什么。我不认为视频正在播放,但现在可能是因为我的互联网连接。我认为这个问题与对齐有关,因为当你转到其他页面时(不长),背景是可见的,但图像上方和下方都有黑条。但是,当我在ipad视口上更改background-position
没有任何更改时。
编辑2 :在Chrome上测试Android智能手机上的按钮,按钮也不在那里工作。奇怪的是,它可以在我的ipad上工作,而这是一个移动设备&#39;太?
答案 0 :(得分:1)
我现在和我在一起ipad。我可以帮你解决问题,但我不理解这个
从我的iPad中添加了两个屏幕截图,以便您可以看到我的问题究竟是什么。我不认为视频正在播放,但现在可能是因为我的互联网连接。我认为这个问题与对齐有关,因为当你转到其他页面时(不长),背景是可见的,但图像上方和下方都有黑条。但是,当我改变背景位置时,我的ipad视口没有任何变化。
你能用指针做截图有什么问题吗?