Почему CSS не работает должным образом на Android? - PullRequest
Новая
       18

Почему CSS не работает должным образом на Android?

0 голосов
/ 09 июля 2019

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>

Ответы [ 3 ]

0 голосов
/ 09 июля 2019

Задание фиксированной ширины для элементов DOM может испортить представление в небольших устройствах. особенно когда данная ширина недоступна, поскольку ширина устройства меньше этой ширины.

Итак, при написании медиазапросов для небольших устройств, например мобильных телефонов, было бы здорово, если бы вы заменили все фиксированные значения ширины на проценты. Чтобы они не переполняли доступное пространство и оставались в пределах ширины устройства.

Если у вас есть проблемы специально для ландшафта, вы можете решить их, используя медиа-запрос и комбинацию ориентации. 

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

Приведенного выше кода достаточно для написания правил для небольших устройств при использовании в горизонтальной ориентации.

0 голосов
/ 09 июля 2019

Это происходит из-за того, что экран вашего устройства 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 */
}
0 голосов
/ 09 июля 2019

Невозможно выполнить адаптивный дизайн только с одним медиа-запросом. Чтобы сделать адаптивный дизайн правильным, пожалуйста, посетите и проверьте этот сайт , где объясняются медиа-запросы и примерыо том, как его использовать.

телефон Android и телефон iOS не обязательно использует одинаковую ширину и высоту, большинство телефонов iOS использует width: 375px и height: 667px (или width: 667px и height: 375px в альбомном режиме ), , хотя это только для iPhone 6/7/8, за исключением Plus и других моделей , вы можете проверить ширину /высота, какой телефон использовать в Chrome / Mozzila Firefox / и т.в режиме разработчика при эмуляции мобильных устройств.

...