Skip to main content
T
TelephoneJack
Inspiring
June 2, 2017
Answered

Detecting small screens in responsive design

  • June 2, 2017
  • 2 replies
  • 1266 views

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

This topic has been closed for replies.
Correct answer osgood_

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

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

2 replies

pziecina
pziecina
Legend
June 2, 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.

T
TelephoneJackAuthor
Inspiring
June 2, 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

pziecina
pziecina
Legend
June 2, 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/

O
osgood_Correct answer
Legend
June 2, 2017

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

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

T
TelephoneJackAuthor
Inspiring
June 2, 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

O
osgood_
Legend
June 2, 2017

Media queries wont work unless the viewport meta tag is present

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices