Detecting small screens in responsive design

Report · Jun 01, 2017

I have used the usual media queries to produce a responsive WEB design but I am having a little trouble.

If I use:

@media only screen and (max-width: 700px) {

I can only detect a window on a PC that has been reduced in width to less than 700px. The problem is that the max width of smart phones is as wide as a PC screen and all that happens is that the display on a phone is too small to read.

It seems to me that I need to detect the dimension of the screen in cm. My media queries work properly and give the correct results within Dreamweaver CC and by adjusting the width of the window on a PC. The display on a phone is the same as on a PC except that it is too small to read properly.

I have seen a lot of discussions on the WEB on this issue and on calculating the width of a phone screen but nothing that is easily used with HTML/CSS.

Any suggestions?

Thanks

Jack

Report · Jun 02, 2017

Are you using the viewport meta tag in the <head></head> section of the webpage?

Report · Jun 02, 2017

No, I'm not using the viewport meta tag. My understanding is that this is useful to scale up content to fill a screen - this is not what I want.

I have multiple columns and tables with multiple columns. I use media queries to move to single columns when the width is reduced to a point where multiple columns become hard to read. This works fine if I make the browser window narrow - at the media query defined setpoint, the screen re-arranges itself as required.

The problem is that the screen is too small when it is less than about 10cm wide. Making a set point at 650px does not work because the mobile screen resolution is high.

Using set points in px with modern high resolution gadgets is a waste of time.

Jack

Report · Jun 02, 2017

Media queries wont work unless the viewport meta tag is present

Report · Jun 02, 2017

osgood_ wrote
Media queries wont work unless the viewport meta tag is present

Strongly disagree.

media-queries are a css feature, and only dependant on browser support. The viewport meta tag is a none standards feature introduced by Apple, and being replaced by the css @viewport feature.

Report · Jun 02, 2017

As far as l know it needs to be there for mobile devices. Quite a few times its been the solution in this forum for those that have left it out whilst using media queries.

Report · Jun 02, 2017

It depends on what you are using.

If you use resolution, pixel-aspect-ratio or dppi then the meta tag is irrelevant as the device returns the correct units. As i said previously though, for some units such as inch then some devices are returning the value in css pixels, (96ppi). Beware though as the css 2.3 rewrite is being done to account for hi-dpi devices, so while we all have used css pixels as the standard, (except Adobe, who still use 72ppi) the css spec rewrite is now talking about 'matching device ppi', so full retirement looks better every day.

The MS surface tablet, (Edge browser, windows 10) does not support the meta tag unless it is vendor prefixed, and along with Chrome, Firefox are moving to support only the css @viewport property. Or if you prefer we are going to end up with yet another minefield, when 4k monitors become more popular, as Apple will probably stick with its none standard meta tag, and MS windows/Edge will use the @viewport.

Report · Jun 02, 2017

Just thought you may be interested in this 'explanation' of the viewport meta tag, if you follow a few of the links it makes even less sense

https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

Report · Jun 02, 2017

pziecina wrote
It depends on what you are using.
If you use resolution, pixel-aspect-ratio or dppi then the meta tag is irrelevant as the device returns the correct units. As i said previously though, for some units such as inch then some devices are returning the value in css pixels, (96ppi). Beware though as the css 2.3 rewrite is being done to account for hi-dpi devices, so while we all have used css pixels as the standard, (except Adobe, who still use 72ppi) the css spec rewrite is now talking about 'matching device ppi', so full retirement looks better every day.
The MS surface tablet, (Edge browser, windows 10) does not support the meta tag unless it is vendor prefixed, and along with Chrome, Firefox are moving to support only the css @viewport property. Or if you prefer we are going to end up with yet another minefield, when 4k monitors become more popular, as Apple will probably stick with its none standard meta tag, and MS windows/Edge will use the @viewport.

I'll worry about that when it actually happens - assuming I'm still around. Some one will find a way of developing using new techniques/methods then slowly everyone will follow, just as has always been the case.

Report · Jun 02, 2017

The queries are working on PC, laptop & convertible. Just not on the phone.

I naturally thought I didn't need a viewport meta tag statement.

Then I thought as its a phone, there might be a large difference in size between the default viewport and the screen size...

So I tried it - and it worked!

Thanks for that. I'll play a bit and see what's really needed and report back. The server backups are in the way at the moment.

Regards

Jack

Report · Jun 02, 2017

You could add the resolution and/or the pixel-aspect-ratio property to target hi-dpi devices -

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-webkit-device-pixel-ratio

The problem with detecting device screen sizes has been with us since the first retina display, and will probably remain a problem for a number of years as device resolutions increase. We currently have 1x to 5x displays in various sizes, and 8x displays are already being previewed at various tech shows.

No matter how you decide to develop for the various possibilities, a compromise has to be reached. Going forward anything from small wearable devices to large screen, (55 in+ 8k TV) can be used to view a web site. Writting css media-queries to cover all possibilities is impossible, and the W3C and browsers are trying to find a solution, one of which is using dppx, (dots per pixel) and not just pixels.

The main problem though is that users of mobile devices or large screen devices do not update their browsers, sometimes never, so using the newer css properties will not always work. This leaves you with the classic two options of catering for the majotity, or limiting your designs.

Report · Jun 02, 2017

Yes I understand all of that but in my case, nearly all of the problems would go away if I could make set points in cm rather than px.

There are inconvenient interactions of course - I need a certain minimum resolution. However gadgets turn over in about 24 months and it is already rare to find one with insufficient resolution. My content will not sensibly display on a wearable gadget but at this point someone with a wearable gadget is not likely to be looking at my content. In time that will change - and so will my content.

Thanks for the responses guys.

Regards

Jack

Report · Jun 02, 2017

There is nothing stoping you using both the resolution and a valid css2.2 width value in a media-query.

css does recognise cm, mm, inches as valid values -

https://www.w3.org/TR/css3-mediaqueries/#width

Also see, (under distance values, absolute units) -

https://www.w3.org/TR/css3-values/

Report · Jun 02, 2017

One warning though if you use absolute values -

In testing i have found that some browsers use css pixels to work out the size when using absolute values, though i have only tested inch values when testing on TV's over 35 inch, also don't forget that when a screen size is given by the manufacturer it is the diagonal size, (top to bottom corners) and not the width, (top to top corner).

That said, i can recommend inch values for width/height, and ppi settings for image creation, for images used on large screens, (much easier to work with).

Report · Jun 02, 2017

So it does - that's helpful.

I tried:

@media only screen and (max-width : 10cm) {

and sure enough, at approximately 10cm as I reduced the width of the browser window, the content rearranged.

I tried with my phone - it still looks like a minature PC screen.

I'll have to play with it a bit and see what is happening. The width in cm is not accurate but my phone is about 7cm - a fair bit less than 10cm.

I'll leave it for the moment because the auto Friday night backup will start soon and hog the network. I'll report back when I've had a chance to experiment.

Thanks for the help - I appreciate it.

Jack

Detecting small screens in responsive design

1 Correct answer