Menu
I really don't know what to do with this, I have a galaxy Tab 2, 7 inches tablet and using chrome as the browser (v26.0.1410.58) in Android 4.1.1. I'm loading the web app in portrait mode and the media query matches just fine, I switch it to landscape mode, and everything works good too, but when I switch it back to portrait mode, the browser just doesn't apply any style at all, and debugging the app with the tablet usb connected to the PC, I can see chrome didn't find a match with any media query anymore.
The media query I'm applying is:
(device-width: 600px) and (max-device-height: 1024px) and (max-width: 600px) and (min-device-height: 976px) and (orientation: portrait)
If I check the device's width and height in the browser after and before this happens, they don't change at all either.
Some data that may be useful:
screen.width: 600
screen.height: 976
$(window).width(): 600
It's only happening in this device and I need to support the app in this tab.
545
Media queries can also be used to change layout of a page depending on the orientation of the browser. You can have a set of CSS properties that will only apply when the browser window is wider than its height, a so called "Landscape" orientation.
Media queries are commonly associated with CSS, but they can be used in HTML and JavaScript as well.
Media queries are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse.
The Placement of Media QueriesThe internal method includes adding the <style> tag to the <head> tag of the HTML file, and creating the media query within the parameters of the <style> tag. The external method involves creating a media query in an external CSS file and linking it to your HTML file via the <link> tag.
I don't have your device to test on, but I usually stick to simpler media queries.
Perhaps trying just max-width instead of device-width. I find that doing this coupled with percentage based layouts means I am not device-specific with my layouts.
@media (max-width: 600px) { ... }
179
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
