移动方向更改不应用CSS [英] Mobile orientation change not applying CSS

问题描述

我正在测试我正在开发的网站，并正在使用媒体查询。

当我在浏览器中测试和调整页面大小时，一切都很好。 / p>

但是当我在移动设备上测试时，我在更改手机方向时遇到问题。

如果我在 landscape 模式下载入页面，则会应用正确的CSS。

当我更改为<$

但是如果我回到 landscape



我正在使用这些元标记 p>



 < meta name =MobileOptimizedcontent =320> 
< meta name =viewportcontent =width = device-width，initial-scale = 1.0，maximum-scale = 1.0，user-scalable = no> 
  

在我的媒体查询中我有

  @media 
只有屏幕和（最大宽度：610像素），
只有屏幕和（最大宽度：610像素） 。} 
 
 @media 
只有屏幕和（最小设备宽度：240像素）和（最大设备宽度：520像素），
只有屏幕和：240px）and（max-width：520px）{...} 
  

设备宽度，以确保它的确定，并在横向模式它 598px 宽和 code> 384px

我使用的是Nexus 4（Android 4.3）

当我改变方向后，如何使用CSS？

编辑
如果我在 portrait 中加载网站，然后更改为 landscape ，则不会应用CSS。

解决方案

我的问题是与我的CSS请求的顺序相关。

我用来定义'min-device-width'

  @media 
只有屏幕和（min-device-width：240px） width：520px），
 only screen and（min-width：240px）and（max-width：520px）{...} 
   
 
但如果我最后定义它，它工作。
  @media 
 only screen and（min-width：240px）and（max-width：520px），
 only screen and（min-device-width：240px）and（max-device-width：520px）{... } 
  
有关device-width的详细信息： -  查看此问题 
 
I'm testing a website I'm developing and am using media queries.

When I test and resize the page in a browser, everything is good.

But when I test on my mobile device, I encounter a problem when I change the orientation of the phone.

If I load the page in landscape mode, the correct CSS are applied.

When I change to portrait, the CSS are also correct.

But if I go back to landscape, the portrait css classes are still being applied.

I'm using these metatags  
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
And in my media queries I have
@media 
only screen and (max-width: 610px),
only screen and (max-width: 610px) and (orientation:landscape) { ... }

@media
only screen and (min-device-width: 240px) and (max-device-width: 520px),
only screen and (min-width: 240px) and (max-width: 520px) { ... } 
I've alerted the device width to make sure it's ok and in landscape mode it's 598px wide and portrait is 384px

I'm using a Nexus 4 (Android 4.3)

How come the CSS aren't applied once I change back the orientation?

EDIT:
If I load the site in portrait and then change to landscape, the CSS aren't applied.
It's as if once it goes to the smallest resolution, it can't go back.
解决方案
My problem is related to the order of my CSS requests.

I used to define 'min-device-width' before the rest.
@media
only screen and (min-device-width: 240px) and (max-device-width: 520px),
only screen and (min-width: 240px) and (max-width: 520px) { ... } 
But if I define it last, it works.
@media
   only screen and (min-width: 240px) and (max-width: 520px),
   only screen and (min-device-width: 240px) and (max-device-width: 520px) { ... }
For more information about device-width:- check out this question 

                        
这篇关于移动方向更改不应用CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！