Sat, 2015-06-13 20:16
I notice that media-queries include "device-width", "min-width", max-device-width" etc.
Using these, I thought I might come up with a sloppy way of telling whether the user is using a small device or a large one.
If it is a cell phone, I would redirect to a mobile page, otherwise I would stay on my usual page.
I don't think this can be done in JavaScript, but I thought if I set a style with a media query, I could use JavaScript to detect that style, and then redirect, if need be.
I know the syntax is:
@media only screen and (min-width: 330px) { #mediatest { background-color: lightblue; } }
But what would the above do? Is it just measuring screen-width in pixels? That I can already do in javascript.
Thanks.
Sun, 2015-06-14 04:49
#1
Some basics
For responsive sites, it is more necessary than ever to write well organized, structured and marked up pages. Write as if Lynx were the only browser out there. Then style it for the screen. This is the part that gets most folks; you do not write special styles for various devices. You have the right idea, write for breakpoints and let the unknown devices self-select the appropriate stylesheet.
There are some gotchas along the way. MSFT and Google/Apple seem to think you need help; mostly you don't, so shut them up.
<meta name="viewport" content="width=device-width; height=device-height; initial-scale=1.0;">
Use this to do your basic stylesheet:
<link type="text/css" rel="stylesheet" href="/$PATH/screen.css" media="screen,projection,tv">
Now squeeze your browser window until the page breaks or starts horizontal scroll. Let's say it's at 750px width.
<link type="text/css" rel="stylesheet" href="/$PATH/smallscreen.css" media="screen and (max-width:750px)">
That covers all devices of less than 750px width. But, does the page break again as you get more narrow? See where it happens. Let's say it break or hscrolls at 330px.
<link type="text/css" rel="stylesheet" href="/$PATH/smallerscreen.css" media="screen and (max-width:330px)">
For small and smaller screen stylesheets, simply write or overwrite the main stylesheet to reflect the needs of the narrower screens. Do consider eliminating bg images and js driven elements on small screen devices as they tend to stress batteries, memory and bandwidth.
That's probably all you'll need to cover all small screen devices. It is poor practice (generally) to use embedded styles, so I demoed the files version.
Did that cover your question?
cheers,
gary