CSS (@media) 在 WebView 上不起作用

Question

所以，我有一个加载在线 web 应用程序的 web 视图。问题在于为响应而设置的 CSS @media 规则。似乎在使用 webview 时，它们会被忽略，或者加载的 web 无法正确识别设备屏幕尺寸。

问题是，当我通过 Android 的浏览器而不是通过 WebView 加载 webapp 时，工作正常，可以正确加载 CSS。

这里是 CSS。我知道有些@media 被评论了。

/* Portrait and Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
.login-form {
  width: 90%;
  padding-top: 5%;
  margin: 0px auto;
  text-shadow: none;}

 div.col-md-6.text-left, div.col-md-6.text-right {
      text-align: center;
 }
}

/* Portrait
@media only screen and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
} */

/* Landscape
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

} */

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px)  {
.login-form {
  width: 90%;
  padding-top: 5%;
  margin: 0px auto;
  text-shadow: none;}

   div.col-md-6.text-left, div.col-md-6.text-right {
      text-align: center;
 }
}

/* Portrait
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
} */

/* Landscape
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

} */

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) {
.login-form {
  width: 90%;
  padding-top: 15%;
  margin: 0px auto;
  text-shadow: none;}

   div.col-md-6.text-left, div.col-md-6.text-right {
      text-align: center;
 }
}

/* Portrait
@media only screen and (min-device-width: 375px)
 and (max-device-width: 667px)
 and (-webkit-min-device-pixel-ratio: 2)
 and (orientation: portrait) {
} */

/* Landscape
@media only screen and (min-device-width: 375px)
 and (max-device-width: 667px)
 and (-webkit-min-device-pixel-ratio: 2)
 and (orientation: landscape) {
} */

/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) {
.login-form {
  width: 90%;
  padding-top: 20%;
  margin: 0px auto;
  text-shadow: none;}

   div.col-md-6.text-left, div.col-md-6.text-right {
      text-align: center;
 }
}

/* Portrait
@media only screen
  and (min-device-width: 414px)
  and (max-device-width: 736px)
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) {

} */

/* Landscape
@media only screen
  and (min-device-width: 414px)
  and (max-device-width: 736px)
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) {
} */

/* General Landscape*/
@media (min-device-width: 415px) and (min-device-height: 737px) {
.login-form {
  width: 360px;
  padding-top: 100px;
  margin: 0px auto;
  text-shadow: none;}

 }
}

/* General Small */
@media (min-device-width: 415px) and (min-device-height: 580px) {
.login-form {
  width: 360px;
  padding-top: 35px;
  margin: 0px auto;
  text-shadow: none;}

 }
}

/* General Full HD */
@media (min-device-width: 1920px) and (min-device-height: 1080px) {
.login-form {
  width: 20%;
  padding-top: 7%;
  margin: 0px auto;
  text-shadow: none;}
}

/* General Extreme */
@media (min-device-width: 1921px) and (min-device-height: 1081px) {
.login-form {
  width: 360px;
  padding-top: 12%;
  margin: 0px auto;
  text-shadow: none;}
}

Answer 1

您是否检查过是否为视口使用了正确的元标记。它应该在你的 html 页面的 head 标签中。

并特别检查您的媒体查询是否特定于设备。

因此，对于特定设备，只需检查它是否为：max-device-width。如果是这样，则从那里删除设备。然后运行。

如果有其他问题，请告诉我。