PHP宽度屏幕与不同的显示

Question

i have a background that i want to use jpg+video or jpg to display. 我有一个要使用jpg + video或jpg显示的背景。 If it is desktop screen then show jpg+video, else show jpg background if its iphone or ipad size. 如果是桌面屏幕，则显示jpg +视频，否则，如果iphone或ipad大小，则显示jpg背景。 In PHP coding. 用PHP编码。 I am thinking maybe can use if-statement but i am not sure. 我在想也许可以使用if语句，但是我不确定。 Please help! 请帮忙！

Below is to show on desktop/laptop screen size: 以下是在台式机/笔记本电脑屏幕上显示的尺寸：

<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>

Below is to show on iPhone/ipad size: 以下是在iPhone / ipad上显示的尺寸：

<div id="header-bg1">

"header-bg" and "header-bg1" are linked to CSS. “ header-bg”和“ header-bg1”链接到CSS。

Below are the 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

This is not something you should decide on server (PHP) side. 这不是您应该在服务器（PHP）端上决定的事情。 Add modernizr javascript library to your page and use its feature detection. 将modernizr javascript库添加到您的页面并使用其功能检测。

Answer 2

Might take a bunch of extra code to specifically target an iPad and such but this JavaScript might work: 可能需要大量额外的代码来专门针对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>

If you use media screen then you would put something like this in the <head> . 如果使用媒体屏幕，则可以在<head>放置类似的内容。 This will require separate stylesheets or create one stylesheet and use the second part: 这将需要单独的样式表或创建一个样式表并使用第二部分：

<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>

One stylesheet, add this at the bottom of the stylesheet: 一个样式表，将其添加到样式表的底部：

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

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

Try adding display: none on what you don't want to show on a mobile device but do on a PC and vice versa. 尝试添加display: none不希望在移动设备上显示，而不能在PC上显示，反之亦然。 The media queries will overwrite whatever you put in the main CSS as well. 媒体查询也将覆盖您在主CSS中添加的内容。

PHP宽度屏幕与不同的显示

问题描述

2 个解决方案

解决方案1
0 2013-12-01 05:16:21

解决方案2
0 2013-12-01 05:39:28

PHP宽度屏幕与不同的显示

问题描述

2 个解决方案

解决方案1 0 2013-12-01 05:16:21

解决方案2 0 2013-12-01 05:39:28

解决方案1
0 2013-12-01 05:16:21

解决方案2
0 2013-12-01 05:39:28