我有一个背景，我想用jpg+视频或jpg来显示。如果是桌面屏幕，则显示jpg+视频，否则如果是iphone或ipad大小，则显示.jpg背景。在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"answers"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;}
这不是您应该在服务器（PHP）端决定的事情。将modernizr javascript库添加到您的页面并使用其功能检测。
可能需要一堆额外的代码来专门针对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中输入的内容。