对桌面和移动版本使用不同的HTML代码

时间:2016-02-11 16:54:34

标签: php html css mobile alignment

在我website上我试图根据屏幕尺寸更改div的外观。我已经有一个处理它的css文件。当我使用移动版本时,这个div中的标题是这样的: enter image description here 因此,您可以看到标题不适合一行。

代码是:

<div class="row"> 
              <div class="6u"> <section> <h3 class="image-radius img"><img src="images/datorama.jpg"/>DATA VISUALISATION ENGINEER</h3> 
                  <p><b>Datorama</b></p> 
                  <p>•  Digital data analysis and automation</p> 
                  <p>•  User-Interface interaction improvement</p> 
                  <p>•  Visualisation of the insights </p></section> 
              </div> 

所以,我通过添加<br>

来更改代码的一行
<div class="6u"> <section> <h3 class="image-radius img"><img src="images/datorama.jpg"/> <br>DATA VISUALISATION ENGINEER</h3> 

所以,手机版很好。但是当我使用它时,我的桌面版本是这样的: enter image description here

但它曾经是这样的:

enter image description here

我的问题是,如何根据屏幕尺寸设置不同版本的html代码?我有css代码,但很难设置它。现在我只需要添加<br>。有没有办法添加像(IF桌面版本,检查CSS文件 - &gt; HTML代码版本1,否则 - &gt; HTML代码版本2)。

2 个答案:

答案 0 :(得分:2)

你可以在这里找到soemthing:https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

// your mobile css version
@media (min-width: 700px) { 
    // your desktop css version
}

答案 1 :(得分:1)

你可以使用这样的东西

function isMobile() {
  $deviceList = array(
    '/iphone/i' => 'iPhone', 
    '/ipod/i' => 'iPod', 
    '/ipad/i' => 'iPad', 
    '/android/i' => 'Android'
  );

  foreach($deviceList as $deviceKey => $deviceOS) {
    if(preg_match($deviceKey, $_SERVER['HTTP_USER_AGENT'])) {
        // echo your content for mobile devices
    }
  }
}

这些并非$_SERVER['HTTP_USER_AGENT']提供的所有移动设备,您可以查看detectmobilebrowsers.com以获取完整列表