我有兩個與iPad和智能手機(在我的情況下,iphone 5s)的網站編碼問題。ipad上的背景視頻不固定&href鏈接在智能手機不能正常工作
在幾種瀏覽器中,以下代碼對於視頻背景工作正常。 因爲我沒有窗戶,所以沒有檢查IE,但稍後我會擔心。
。
但是,當在ipad上顯示網站時,視頻位於整個網站的中心位置(因此它完全忽略了safari的視口,要查看必須向下滾動的背景,然後在內容後面看到它是正確的]放置在那裏)。視頻不會「與用戶一起向下滾動」(因此它基本上停留在視口內的相同位置,而不是網站的整個高度)。當在智能手機上顯示索引頁(帶有「繼續網站」按鈕)時,按鈕/ href鏈接不起作用。在其他瀏覽器中它可以工作(ipad/safari(laptop)/ 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增加了兩個截圖,讓你可以看到我的問題到底是什麼。我不認爲視頻正在播放,但現在可能是因爲我的互聯網連接。我認爲這個問題與對齊有關,因爲當你轉到其他頁面時(不那麼長),背景是可見的,但是圖像上下有一個黑條。但是,當我更改background-position
時,我的ipad視口沒有任何更改。
編輯2:測試上鍍鉻的Android智能手機的按鈕,按鈕也不在那裏工作。奇怪的是,它在我的iPad上工作,而這也是一個'移動設備'?
這是住在什麼地方?或者你可以把小提琴放起來嗎? – Brian 2014-10-16 17:01:40
@BrianBennett www.divergencepr.nl;) – Lisa 2014-10-16 18:14:07
您是否嘗試過將'html'和'body'標籤設置爲'height:100%'呢?你也可以嘗試'background-position:center center'。 – Brian 2014-10-16 18:31:17