Menu
I am trying to create a mobile friendly version of my website, to make my website responsive to a smaller screen size and scale accordingly.
I've created some media queries, that behave correctly in a browser when resizing on a desktop.
On my iPhone, safari just shrinks the entire website but still maintains the aspect ratio of the full sized site. How do I get the media query to be observed? have I missed something?
Here is a link to a sandbox which I am trying to get working correctly - any help or suggestions are appreciated:
http://www.preview.brencecoghill.com/
384
Mobile Media Query Not Working If your queries are working in a browser but not on mobile, you might have forgotten to set the viewport and default zoom. This tells the browser to render pages according to the width of the device. Adding it often does the trick for making mobile breakpoints work.
Media Query Not Working on Mobile Devices If media queries work on desktop and not on mobile devices, then you most likely haven't set the viewport and default zoom. Note: You only need to add one of the code lines above, and usually, the first one does the job.
CSS Media Queries allow you to create responsive websites that look good on all screen sizes, from desktop to mobile.
Do you have the meta for view port in your html?
<meta name="viewport" content="width=device-width, initial-scale=1.0"> More info here: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/
100
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
