Tue, 2013-11-19 21:34
Hi folks,
Still trying to learn/understand all this mobile/responsive design myself and wonder if media queries should be something I would benefit from? .... I am mainly concerned about iPhones and how compatible my current site is on these devices (based on size restrictions of course).
So ... with that said, should I be adding some iPhone scripts to my current CSS?
Link of main site:
www.ductdoctor.ca
Any advice welcome and I hope you don't mind me asking for advice on this topic also?
All the best,
Cal 
Thu, 2013-11-21 00:35
#1
Hi Calman45, I seem to be
Hi Calman45,
I seem to be getting a lot of questions on media queries lately.
Use them when you need to change the presentation of your site for different window sizes.
Thu, 2013-11-21 20:08
#2
.. could you please elaborate
.. could you please elaborate on your reply Tony?
I think as more and more people are hearing about Media Queries, it sounds like a bit of a minefield until explained properly. My question would be, what media queries to use and why?
I am fairly confident that my website would run okay on a typical pad, but the phone side of things would be the focus of my compatibility testing, as the main concern is paragraphs of text, which mobile users would typically need to zoom in to read - and this is where I would consider using Media Queries and a separate stylesheet call for anyone entering the website from a mobile device.
So ... if I indeed need to include media queries, which examples should I lean towards (include scripts in my CSS), to support devices such as iPhones, Blackberry etc?
All the best,
Cal
Thu, 2013-11-21 22:39
#3
It really depends on the
It really depends on the site.
The general rule of thumb is to resize your window and look at where the site breaks.
Then use those points to think about better ways to display the page at that size.
You can then use min or mad width, media queries to re-style the site to match how you want it to display.
Don't go overboard, just work with 2 or 3 breakpoints, along the lines of phone, tablet, desktop.
You should also set the initial device width <meta name="viewport" content="initial-scale=1.0, width=device-width" /> which stops the device from scaling the page on first load.