In my css I am using media queries like the following in order to define a variable --screenWidth containing the number of pixels in the width of the screen:
#media screen and (min-device-width: 1856px) {:root {--screenWidth: 1856px;}}
#media screen and (min-device-width: 1920px) {:root {--screenWidth: 1920px;}}
#media screen and (min-device-width: 2048px) {:root {--screenWidth: 2048px;}}
I have a screen which is 1920px wide. This value is always returned by the --screenWidth in Chrome whatever the zoom is, but in Firefox the value of --screenWidth depends on the zoom. For example it becomes 2048px when the zoom value is 90% and becomes 1680px when the zoom value is 110%.
How can I make the behaviour the same on both browsers ?
You can use a Firefox -moz-document specific media query:
#-moz-document and (min-device-width: 1920px) {:root {--screenWidth: 1920px;}}
This way you can make your page work differently depending on the browser.
Now for behaving differently according to the zoom level in Firefox I don't know if it's possible using only min-device-width. As it was pointed by cloned, when there's less screen space because of zooming a different page structure is expected behaviour.
Related
I'm on the latest version of Firefox on OSX (v46.0.1) and have implemented a tablet specific design using the following media query:
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px){}
Firefox ignores it completely. It also render the bootstrap xs size media query completely wrong but I don't expect anyone to ever see it (Firefox mobile works fine). I've turned off all the extensions in Firefox just in case but it didn't help.
Has anyone else experienced this?
Change min/max-device
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px)
To min/max-width
#media only screen and (min-width: 768px) and (max-width: 1024px)
The Reason
min/max-width
The width media feature describes the width of the rendering surface of
the output device (such as the width of the document window, or the
width of the page box on a printer).
min/max-device-width
Determines whether the output device is a grid device or a bitmap
device. If the device is grid-based (such as a TTY terminal or a
phone display with only one font), the value is 1. Otherwise it is
zero.
I'm testing my responsive website and sadly, the Chrome emulator is not showing the responsive views when I select a device e.g "iPhone 6". The nasty scroll bars appear and looks horrible however, when I resize my browser the breakpoints are working perfectly?
This is how I am defining my breakpoints - the variable $screen-md is set within a variable. I'm using SASS.
#media screen and (min-width: $screen-md) { }
Here is a screenshot of what's happening in the Chrome Emulator.
1) Check if $screen-md is storing 375px since Iphone6 is 375px wide
2) Change your min-width to max-width.
Explanation with example:
#media only screen and (min-width: 375px) {...}
above code means "If [device width] is greater than or equal to [375px], then do {...}"
#media only screen and (max-width: 375px) {...}
above code means "If [device width] is less than or equal to [375px], then do {...}"
3) My personal experience with Chrome is that it sometimes doesn't load the media queries even if you are on the right viewport size. A few times, I had to increase the max-width value by 1 or 2 pixels to make it work. Try that too! Also, don't forget to clear your cache and refresh the page.
I have coded a responsive website, in which I have CSS media queries to detect the screen size(pixels) of the device the user is navigating with.
Just standard medias. Example:
#media (max-width: 1199px){
/*code*/
}
#media (max-width: 991px){
/*code*/
}
#media (max-width: 767px){
/*code*/
}
When I test my website with my mobile, which is a Samsung Galaxy S4 with 1920x1080 pixels my website shows me the mobile version, which is in this case the #media query with a max-width of 767px.
I understand that most things would be too small to read or be seen if my mobile respected exact measures like 12px font size.
So my question is, how do I control which version of my website is shown on high resolution devices, because pixels media queries aren't working in my case.
#media (max-width: 1199px){
/*code*/
}
The max-width property in the media query works a little different. It is not the resolution of the screen. It is equivalent css pixel.
Here are a couple of articles.
A pixel identity crisis.
A pixel is not a pixel is not a pixel.
moz media query page.
If you want to target device resolution you should use
#media all and (max-device-width: 320px) {
}.
max-device-width:This property measures the device-width. If you write css using media query using this it will get a little complex (mobiles tabs and even desktops can have 1080p resolution screens). In order to target device resolutions you might have to look into properties like -device-pixel-ratio , orientation and device-height to give better control of layouts
The problem might be that you didn't include a viewport meta-tag
<meta name="viewport" content="width=device-width">
I am using Cordova to make a hybrid app.
I have the following media queries in my css file
#media only screen and (min-device-width : 320px) and (orientation: portrait) {
/*css goes here*/
}
#media only screen and (min-device-width : 320px) and (orientation: landscape) {
/*css goes here*/
}
and similarly media queries for all sorts of device width in both portrait and landscape orientation.
When I test my app on Nexus 4, it doesn't detect the orientation change and change the css, example, if I start the app in portrait mode, then based on the device width it picks up the media query of that width in the portrait mode, however if then I change the orientation of the phone, it doesn't detect the new width and apply the new css of the corresponding width and landscape orientation and vice versa.
Am I missing something here, isn't CSS Media query supposed to detect the change in orientation by itself and apply the appropriate CSS?
I also had an issue with this, where I would have a specific media query for portrait landscape and another for landscape, and it would switch fine from portrait to landscape the first time, but when you went back it wasn't updating.
#rockStar should get the credit for the answer, but using min-width instead of min-device-width did the trick for me as well.
Sorry i have been busy with my studies lately so i couldn't check stuff around here this days, Upon request,
using min-width is better than using min-device-width
and the reason would be in here.
Try using a CSS selector based on portrait and landscape mode, i.e you can use a class in landscape mode and apply css and remove the class when in portrait mode and apply css. So basically you can check whether a class exists or not.
I have a set of rules I'd like to apply to all screens smaller than 960px wide.
The obvious was:
#media only screen and (max-width : 959px)
However this fails with iPad in portrait mode. I've read that iPad reports its width and height the same regardless of orientation.
Is there a standard way of making sure the iPad (or other devices that use the same logic as the iPad) respect actual width being viewed?
Obviously I'd prefer to avoid "iPad-specific" rules, or orientation queries - the query should apply to any screen less than 960 pixels wide.
Thanks.
Try using #media only screen and (max-device-width : 1024px) instead. That should cover an iPad in landscape or portrait.
I've read that iPad reports its width and height the same regardless of orientation.
This is tricky. The iPad reports the same max-device-width regardless of orientation. However, it correctly respects different max-width at different orientations/widths. The device is the part that doesn't change.
Hope this helps.