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

时间:2014-10-16 16:09:11

标签: html css mobile media-queries

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

  1. 在多个浏览器中,以下代码适用于视频背景。 没有检查IE,因为我没有窗户,但我稍后会担心。

    但是,当在ipad上显示网站时,视频位于整个网站的中心位置(所以它完全忽略了safari的视口,看到你必须向下滚动的背景,然后你会看到它背后的内容#39; s [正确]放在那里)。该视频不会向用户 '向下滚动(因此它基本上停留在视口内的相同位置,而不是网站的整个高度)。

  2. 在智能手机上显示索引页面(使用'继续浏览网站'按钮)时,按钮/ href链接无效。在其他浏览器中它可以工作(ipad / safari(笔记本电脑)/ chrome / firefox)。点击按钮时,它没有做任何事情。

  3. 有没有办法解决这些问题?

    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;太?

1 个答案:

答案 0 :(得分:1)

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

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

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