What exactly happens when a browser doesn't support media queries? - css

I'm building my site with mediaqueries to adapt to different screen sizes.
By coincidence I checked my site in an old pc with an unupdated browser and found out that I was getting a mix of mobile content and desktop content. However I didn't have a way to see the code since there was no firebug or similar installed.
My question is what happens if the browser doens't accept media queries in css?
Does it ignore everything inside the condition?
Or does it run everything inside the condition whatever the condition is?

If the browser doesn't support Media Queries then nothing happens. It ignores the entire conditional block of styles.
If you wanted to support then you can use this JS http://code.google.com/p/css3-mediaqueries-js/

Related

Media queries only work in responsive mode of multiple browsers

I've built my website using Bootstrap 4. There were some issues with the responsive design so I used media queries to fix those issues. The whole time I'm using Chrome's device toolbar to make the changes to the CSS. While using the device toolbar everything looks as I want it to but when I resize the browser outside of the device toolbar the media queries no longer work. I've tried this in both Chrome and Firefox.
I've prematurely made my site live to see if the issue would still persists when live and the issue is still there. Has anyone encountered this before?
Lakhan Production is the URL. I would greatly appreciate any feedback and insight. Thank you in advance.
In your media queries, you used min-device-width and max-device-width: The device width measures the device (phone, tablet etc.), not the browser window. That's the reason for what you describe. The mobile developer mode of Chrome apparently also emulates the devices that way.
I would rather use min-width and max-width instead of min-device-width and max-device-width

Plain <select> element vs Bootstrap's dropdown element rendered on mobile device

Today I've learnt something new, that <select> element rendered completely different on a desktop and mobile browser. The problem that I haven't use it before and almost all stuff I've done, is by using Bootstrap's elements.
So my question is actually 2 questions are following:
Why <select> tag rendered differently on mobile chrome and desktop chrome when I debugging in mobile mode? Is it intended behaviour or I can consider it as bug? For example open following page http://www.w3schools.com/tags/tag_select.asp from desktop browser in dev mobile mode and on a hardware device, you will see the difference.
What is the best approach to achieve consistency across various devices? Can I be sure that in all new mobile devices <select> will be rendered "in a mobile way", or just implement my own select element based on Bootstrap modal combined with List group as I've done here: http://codepen.io/anatoly314/pen/EPBmrM?editors=1010 ?
DevTools Device Mode does not emulate mobile-specific UA handling of form elements. This is actually very tricky to do since those things are compiled for that platform build.
The best thing to do is know there will be a difference. In the case of select elements it really doesn't matter much. Since the mobile UX is a full screen scroll selector of the choices.
The absolute best thing, as always, is use Device Mode as a guideline. It is not absolute nor can it be. You will always need to do on-device testing to verify everything works as expected. DM simply gets you 85-90% of the way there without issue.

CSS Media Queries not kicking in when there supposed to

Hi Guys (& Girls of course)
I'm having a major problem with webkit and media queries. Basically they are only kicking in around 15-30px after they should.
When I load the page with Javascript enabled I can see from the console the correct device width and this corresponds with the array of extensions that I've thrown at it.
When I disable javascript I get the same result so obviously it isn't my javascript or any plugins that are throwing things out.
In the dev tools I can watch the inspector tab and the relevant media queries don't kick in until after they are supposed to and you can see the the resolution they have kicked in don't match the media queries themselves.
Any help would be much appreciated on this one as I'm now not really able to come up with any other suggestions.
If there is any information that I can give you that will help you to help me please let me know (I'm restricted in what screenshots I can provide due to non-disclosure).
Thanks in advance & here's hoping :-)
John
After sharing my question on Twitter I was sent this link which has fixes
http://mattstow.com/your-media-queries-are-wrong-fix-them-with-viewport-genie-and-mqgenie.html
It basically says that webkit doesn't take into account the scrollbars when applying media queries and that would (to me) explain the correct space that the media queries are off by. I hope that others find this answer useful as I couldn't find any information by searching Google. Obviously now that I am able to narrow down the search I would probably be able to to find the answer on there.
Check the difference between the browser width and the viewport width. It's the latter you want to design for with mobiles, tablets etc.
The scrollbar is the cause of this, the calculated width from js and the width you define in media query are not the same due to scrollbar (I think in some browsers they are the same but not all).
You need to sync the width so that js and media query is the same. If you want to go with media query width then you probably need an element to check for that changes with the css. If you wanna go with js width then you can easily add a class to the body and target your media query with that class. I am sure there are other ways of syncing as well.

What is better: CSS media queries or JQuery mobile?

I'm newbie for developing mobile website. I very confused between two methods because I dont have any experience this it. Whats more better between two methods: css query when we using all of width device in css file or using jquery mobile that use php technique for differented user that use desktop or mobile [user->php?->mobile use jquery mobile/desktop use css standard]?
Many thanks for this answer
I will classify methods by their importance, from most important one to less important:
Client side detection
Using Modernizer javascript library to detect mobile / desktop environment
Server side detection
Using Modernizer Server or WURFL. Little complex then first solution but much more detailed (if you need more data about used device)
CSS media queries
Bad solution to detect desktop /mobile devices. Current mobile devices can have screen resolution equal to desktop platform
JavaScript based browser sniffing
Worst solution possible. Specially if you want to make distinction between smartphones and tablets.
To find more about this solutions, read my other article/answer with examples: https://stackoverflow.com/a/15055352/1848600
I have to post an answer in here since this comes first in search engines and accepted answer is not accurate.
There are two main concerns regarding responsive designs:
Content: Content should be restructured based on the width/height of the view port so the user can view the content without the need of constant zooming in and zooming out. This needs to happen solely based on the resolution of the view port regardless of the device. It could be a mobile device or a small window in desktop. This mainly involved the look and feel of the website and it is absolutely fine to use media queries. Even IMHO it is the best to use media queries to have the separation of concerns between your view and logic. No web designer likes to see random width or height showing up on their html elements during debug without knowing where are they coming from. Media queries will help you to resize the elements and show or hide them; however, in some situations you may need to move elements around; I usually do these using ng-if or ng-switch in angular js in combination with modernizer.
Functionality: If you need to turn on/off features based on the device functionalities, do not depend on the viewport specifications; use the vast libraries available in JS.
On a side note smartphone browsers seem to render at far lower resolution than actual device screen dimensions. Bust out a quick JS to show you your window resolution and run it on your phone.
Example: Chrome runs at 360x640px on my android screen of 1440x2560px.

How does display:none; effect css for mobile devices?

If we have hidden some stuff using display:none; for example: images , will it still be downloaded by rendering engine? If yes, does that mean while opening the same web page in mobile, it's going to be unnecessary extra weight to download?
This can further mean that modifying the same webpage for mobile can be a bad idea. Please advice. Thanks.
Yes, the entire page is downloaded (hidden elements and all). The display:none is meaningless until the page has been processed by the browser's CSS Engine.
There are several ways to stop an image being downloaded, wether the image is inline or is a background image within a CSS style, or wether it is being brought in through a media query. It works for nearly all mobile devices (except 'Fennec 10.0+' being the only device that still downloaded the image.- see Tim Kadle's test results)
Tim Kadlec's 'Media Query & Asset Downloading Test Results' research at:
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
It says, for a background image, hide the parent element. If you can’t do that, then use a media query to set the background-image to only download when screen or device size is at certain size. Just define what you want hidden / to not download by putting inside media queries. Isn't it marvellous.
Also another brilliant test to use, so simple, at:
http://timkadlec.com/mq/test4.php
On this test you just resize your browser window to mimic wether 'desktop' or 'mobile' to see wether it is downloading images related to the media queries. You simply click the links for each scenario you want to test.

Resources