CSS（@media）在WebView上不起作用

Question

So, I have a webview which loads an online webapp. The problem is with the CSS @media rules that are set for it to be responsive. It appears that when using the webview, they get ignored, or the web loaded doesn't identify correctly the device screen size.

The thing is, when I load the webapp via Android's browser, not through a WebView, works fine, loading the CSS correctly.

Here it is the CSS. I know that some @media's are commented.

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

Have you checked that you have used proper meta tag for viewport. It should be in head tag in your html page.

And specially check if you media queries are specific for devices.

So for device specific just check it is like: max-device-width. If it is something like that then remove device from there. And then run.

And let me know if something other than that.