Saturday, 15 May 2010

css - Media query doesn't update in rotating for iphone 4 and iphone 5s -


CSS is not updated in the media query when I rotate the iPhone 4 and the iPhone 5 between the picture and the landscape

/ P>

Since I use the viewport measurements, VWs and VHs in the media queries CSS, I hope they re-apply to rotate between portrait and landscape - all except the iPhone 4 and iPhone 5s Work perfectly fine in the phone. When I rotate from the picture to the landscape, the width of the image is also made in the landscape.

I do not understand that only iPhone 4 and iPhone 5 have the same problem. Can I have some problems in my CSS?

[edit] The pieces of code are below:

  @ media only screen and (min-device-width: 320px) and (max-device-width: 640 Px) {... .products .product INO {width: 80vw; Margin: 0 0 0 0; I when the 80th version has the same width to rotate from portrait to landscape in the iPhone 4. In the scenario, the physical width of page 80vw does not change, can I get any help for this?   

Here are some good examples

  / * iPhone 4 (landscape) ----------- * / @ Media only screen and (minimum-device-width: 320px) and (max-device-width: 480px) and (Orientation: scenario) and (- Webkit-min-device-pixel-ratio: 2) {/ * Styles * /} / * iPhone 4 (images) ----------- * @ @ Media only screen and (min-device-width : 320px) and (max-device-width (480px) and (Orientation: Portrait) and (-webkit-min-device-pixel-ratio: 2) {/ * Styles * /} / * iPhone 5 (Landscape) ----------- * / @ Media only screen and (Min-Device-width: 320px) and (Maximum device-height: 568 pixels) and (Orientation: Scenario) and (-webkit-device-pixel-ratio: 2) {/ * Styles * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * (Orientation: Portrait) and (-webkit-device-pixel-ratio: 2) {/ * Styles * /} / * iPhone 6 (Land Skep) --- -------- * / @ Media only screen and (minimum-device-width: 375 px) and (maximum device-height: 667 px) and (Orientation: scenario) and (-bbkit -Divise-pixel-ratio: 2) {/ * Styles * /} / * iPhone 6 (Picture) ----------- * / @ Media only screen and (Min-Device-width: 375px ) And (Maximum device-height: 667 px) and (Orientation: Portrait) and (-webkit-device-pixel-ratio: 2) {/ * Styles * /} / * iPhone 6+ (Landscape) ----- ------ * / @ Media only screen (Minimum-device-width: 414px) and (max-device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {/ * styles} IPhone 6+ (images) ----------- * @ @ Media only screen and (minimum-device-width: 414px) and (Maximum device-height: 736px) and (Orientation: Picture) And (-webkit-device-pixel-ratio: 2) {/ * Styles * /}  


No comments:

Post a Comment