为什么 CSS 在 android 上没有按预期工作？

Question

当屏幕在横向模式下旋转时，CSS 小型设备的媒体查询不适用于 Android，背景颜色不变，并且表单溢出。

站点运行良好，关闭屏幕旋转时，我不知道为什么会出现这种情况，因为 IOS 没有问题，只有 Android.

CSS代码：

* {
  box-sizing: border-box;
}

*:focus {
  outline: none;
}

body,
html {
  height: 100%;
  margin: 0;
}

body {
  background: linear-gradient(to top left, #5487ab 17%, #ffffff 102%) fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (max-width: 549px) {
  .houseImg {
    display: none;
  }
  .container {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    background-color: #f1f1f1e0;
    height: 386px;
    width: 278px;
    border-radius: 9px;
    margin: auto;
    margin-top: 4rem;
  }
  .brand {
    display: block;
    margin: auto;
    width: 29%;
    padding-top: 28px;
  }
  .brandName {
    font-family: 'Source Serif Pro', serif;
    display: block;
    text-align: center;
    font-size: 19px;
    color: #0060a3;
    letter-spacing: 0.4px;
    margin: 0;
    margin-top: 7px;
  }
  .usrTxtField {
    background-color: #f1f1f1e0;
    width: 237px;
    height: 31px;
    border: 1px solid #8c8b8b;
    border-radius: 7px;
    font-size: 16px;
    padding-left: 8px;
    font-family: 'Maven Pro', sans-serif;
    color: #252525;
    transition: none;
    display: block;
    margin: auto;
  }
  .usrTxtField:focus {
    border: 2px solid #3d79a2;
  }
  .usr {
    margin-left: 20px;
    margin-bottom: 4px;
    margin-top: 20px;
    font-family: 'Maven Pro', sans-serif;
    font-size: 12.5px;
    color: #5a5a5a;
  }
  .submitLogIn {
    background-color: #0060a3;
    border: none;
    display: block;
    margin: auto;
    text-align: center;
    height: 40px;
    width: 125px;
    margin-top: 17px;
    border-radius: 25px;
    color: #fff;
    font-size: 14px;
    letter-spacing: 0.4px;
    font-family: 'Maven Pro', sans-serif;
    cursor: pointer;
  }
  .checkboxSave {
    margin-left: 20px;
    margin-top: 10px;
  }
  .saveText {
    font-family: 'Maven Pro', sans-serif;
    color: #5a5a5a;
    font-size: 12px;
  }
  .forgotPassword {
    font-family: 'Maven Pro', sans-serif;
    color: #0060a3;
    font-size: 12px;
    text-decoration: none;
    margin-left: 18px;
  }
}

HTML代码：

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Art</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Source+Serif+Pro:600&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Maven+Pro:500&display=swap" rel="stylesheet">
  </head>

  <body>
    <div class="gridContainer">
      <div class="container">
        <a href="index.html"><img src="img/artLogo.png" class="brand"></a>
        <p class="brandName">ART PS GROUP</p>
        <form autocomplete="off">
          <p class="usr">Username</p>
          <input type="text" name="usrTxt" class="usrTxtField">
          <p class="usr">Password</p>
          <input type="password" name="password" class="usrTxtField">
          <input type="submit" name="submit" value="Log In" class="submitLogIn">
          <input type="checkbox" name="save" class="checkboxSave"><span class="saveText">Remember me</span><a href="#" class="forgotPassword">Forgot Your Password?</a>
        </form>
      </div>
      <div class="container2">
        <img src="img/birdHouse.jpg" class="houseImg">
      </div>
    </div>
  </body>

</html>

Answer 1

只用一个媒体查询是不可能完成响应式设计的。为了正确地进行响应式设计，请访问并检查这个site，其中媒体查询是解释并举例说明如何使用它。

Android phone 和 iOS phone 不一定使用相同的宽度和高度，大多数 iOS phones 使用 width: 375px 和 height: 667px（或 width: 667px 和 height: 375px 在 横向模式), 虽然这只适用于iPhone 6/7/8 不包括Plus和其他模型，你可以检查width/height哪个phone 在 Chrome/Mozzila Firefox/etc 中使用它。在开发者模式下模拟移动设备。

Answer 2

为 DOM 元素提供固定宽度可能会扰乱小型设备的视图。特别是当给定宽度不可用时，因为设备宽度小于该宽度。

因此，在为较小的设备（例如手机）编写媒体查询时，如果您将所有固定宽度替换为百分比，那就太好了。这样它们就不会从可用的 space 中溢出，并且会保持在设备宽度内。

如果您遇到专门针对横向的问题，您可以使用媒体查询和方向组合来处理它们。

@media all and (max-width: 768px) and (orientation: landscape) {
}

以上代码足以编写横向使用的小型设备的规则。

Answer 3

发生这种情况是因为您的 android 设备屏幕的高度大于 549 像素（考虑到您的媒体查询规范）。当然在横向模式下，这个高度变成了设备宽度，因此你的媒体查询被忽略了。

这是您可以针对几乎所有手机定位的媒体查询


/* phones (portrait and landscape) ----------- */
@media only screen and (min-width : 320px) {
/* Styles */
}

/* phones (portrait only) ----------- */
@media only screen and (max-width : 480px) {
/* Styles */
}

为什么 CSS 在 android 上没有按预期工作？

Why CSS is not working as desired on android?

css

responsive-design