Question

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

代码是：

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

所以，手机版很好。但是当我使用它时，我的桌面版本是这样的：

但它曾经是这样的：

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

Answer 1

你可以在这里找到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
}

Answer 2

你可以使用这样的东西

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以获取完整列表

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

2 个答案: