Question

我有一个背景，我想用jpg +视频或jpg来显示。如果它是桌面屏幕然后显示jpg +视频，否则显示jpg背景，如果它的iPhone或ipad大小。在PHP编码中。我想也许可以使用if语句，但我不确定。请帮忙！

以下是桌面/笔记本电脑的屏幕尺寸：

<div id="header-bg"> 
<video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volumne="0">
<source src="images/show-bg.mp4" type="video/mp4">
<source src="images/show-bg.webm" type="video/webm">
<source src="images/show-bg.ogv" type="video/ogg">
Video not supported
</video>

以下是iPhone / ipad尺寸：

<div id="header-bg1">

“header-bg”和“header-bg1”链接到CSS。

以下是CSS：

#header-bg {background: url(../images/header/show-bg.png) 0% 0 no-repeat;}
#header-bg1 {background: url(../images/header/show-bg.jpg) 0% 0 no-repeat;}
#video_background {position: absolute; bottom: 0px; right: 0px; min-width: 100%; min-height: 100%; width= auto; height: auto; z-index: -1000; overflow: hidden;}

Answer 1

这不是你应该在服务器（PHP）方面决定的。将modernizr javascript库添加到您的页面并使用其功能检测。

Answer 2

可能需要一堆额外的代码来专门针对iPad，但这样的JavaScript可能有效：

<script>
    if ( $( window ).width() > 1024 {
        document.write("
            <div id="header-bg"></div>
            <video id="video_background" preload="auto" autoplay="true" loop="loop"  muted="muted" volumne="0">
                <source src="images/show-bg.mp4" type="video/mp4">
                <source src="images/show-bg.webm" type="video/webm">
                <source src="images/show-bg.ogv" type="video/ogg">
                Video not supported
            </video>
         ");
    } else {
        document.write("
            <div id="header-bg1"></div>
        ");
    }
</script>

如果您使用媒体屏幕，那么您可以在<head>中添加这样的内容。这将需要单独的样式表或创建一个样式表并使用第二部分：

<head>
    <link href="" media="screen and (max-width: 1024px)" rel="stylesheet" type="text/css"> <!-- Should target iPads -->
    <link href="" media="screen and (max-width: 480px)" rel="stylesheet" type="text/css"> <!-- Should target iPhones -->
</head>

一个样式表，在样式表的底部添加：

@media screen and (max-width: 1024px) {
    css goes here {
    }
}    

@media screen and (max-width: 480px) {
    css goes here {
    }
}

尝试在您不希望在移动设备上显示但在PC上显示的内容上添加display: none，反之亦然。媒体查询也会覆盖您在主CSS中放置的任何内容。

PHP宽度屏幕与不同的显示

2 个答案: