1 reply [Last post]
gidmeister3
gidmeister3's picture
Offline
newbie
Last seen: 3 years 37 weeks ago
Timezone: GMT-5
Joined: 2014-11-01
Posts: 6
Points: 13

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.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.