Reliable screen size detection 3

[audiopro]

I have read about numerous methods for detecting the screen size or resolution of a user's device. Many of the articles speak of unreliability and most of the articles are a few years old now.

Has a reliable method of screen detection been discovered or is it still a case of the existing methods work for most devices but not all.
Many of the one size fits all solutions I see look great on the small screen of a mobile phone but the images look ridiculously large on a large monitor or laptop.

Keith

http://www.studiosoft.co.uk

 

[Olaf Doschke]

If at all, it would have been defined, implemented, but not discovered. One problem is, even if you know the number pixels you still don't know the size in inch/mm.

It's surely a client side thing and thus you only find solutions in client side code, html, css and javascript.
The typical viewport definition you do is [tt]<meta name="viewport" content="width=device-width, initial-scale=1.0">[/tt] and you still don't know anything about the pixel size.
The other thing you'll even not know and only can deduce from the ppi (pixel density) is how far off the display the user is. On a very large screen you can assume your app runs on a tv and should render text much bigger in pixel AND physical size, then on a smartphone a user has within hand reach.

So it's not even only a problem of knowing physical dimensions and I see no real solution for that matter.

You can more and more rely on what HTML5/CSS3 gives you is the truth about the devices and stop supporting older devices, browsers, and older HMTL/CSS standards.

The best way is making it a users choice to zoom as he needs/wants and maybe offer different views with more and less detail, so the adaptation is half automatic, still convenient enough to the user to not depend on the intelligence of code and exactness of CSS implementation.

Bye, Olaf.

 

[Borvik]

The typical means of targeting a size of device is the following:

@media screen and (min-width: 300px){ }

You could be using max-width, or even a combination of factors. Usually you would also build out from a default (usually starting with mobile, but could technically start on desktop too), and progressively add rules within a media query to support a smaller/larger screen size.

As Olaf pointed out, using pixels as a measurement isn't really a great way to do it - though the viewport tag mentioned is very helpful.

Now I don't know how widespread the support is but I have used the following in Chrome (desktop/mobile) and IE (desktop/mobile WinPhone 8.1), Edge, and an iPhone (no clue on version).

@media screen and (min-width: 6in){ } /* This one is the kicker */
@media screen and (min-width: 44em){ }

Using that we can target different sizes of devices via their physical dimensions. While this makes it a little easier to target devices there are still limiting factors (at least in how I wanted to do some things). I think that in order to have truly responsive sites we need something that can respond to the size of elements or their containers (element/container queries). These concepts have been proposed, and are seemingly dead (see A List Apart for a good article on this).

 

[Olaf Doschke]

Also see here:

http://static.zealous-studios.co.uk/projects/web_tests/PPI tests.html

Both an article and a test suite. Also view source.

Bye, Olaf.

 

[vacunita]

In my experience, there's no way to reliably know the screen dimensions of a device, and no real need to do so either.

Your HTML and CSS should be designed such that they can adapt to whatever screen size they are in. This means coding dynamically, and using as few fixed widths as is possible.

As Borvik points out you can use media queries to adjust things for more specific screen dimension ranges, not really specific sizes. At the end of they day, your CSS should be able to resize images and sections when space is reduced based on more general media queries.

i.e whether a screen is 300px wide or 200px wide, the general layout should apply to both, and adjust content sizes to fit the slightly smaller ones dynamically.

Same thing with larger ones. General sizing definitions that should work through most target sizes without needing to know exactly how big the screen is.







----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[audiopro]

The main problem I encounter is that the resolution of smart phones Iphone6, for example is 1920x1080 ie. the same as that of entry level monitors and so is able to display the same screen. How do you size text so that it is readable on all sizes of screen?

I appreciate we cannot use fixed widths but even percentages will not work across all displays.
It seems to me, the only way to lay the page out is to make all webpages a single column which expands and contracts to fit the required medium.
The sites I am having difficulty with are shopping sites with menus, grids of products, spec sheets etc rather than simple 'About Us' type pages.

Keith

http://www.studiosoft.co.uk

 

[Olaf Doschke]

Well, if you read the links I gave, you'd know even px is not 1:1 pixels. Anyway, you have em and font sizes in pt are also a value relating to physical dimensions insteadd of pixel counts.
Todays browsers and CSS3 are capable to make ppi detection, the demo page for example works for me also in IE9.

Finally, in this special case, you begin displaying a webpage, as if it was on a PC monitor and not on a high pixel density smartphone, but the user can zoom. It's unsatisfactory to need to pan in that case, but aside of resultion detection in width, you also have device-width. That cannot only differ, because a screen is split and you have partial dimensions in a window, that also differs, because high density display devices tell you this way a CSS pixel has several pixels widths.

Like Brovik says you can also make decisions on the base of min-width in inches, you can also react to min-device-width, which will be lower than min-width on high resolution devices. And last not least you can react to device-pixel-ratios:

https://css-tricks.com/snippets/css/retina-display-media-query/

I showed you how you define the initial viewport to have width=device-width, no matter if the app shows a window not in full device-width or not, then the device-width is something you can relate to, no matter if the screen is split to show tow apps (a feature only Windows does, AFAIK).

You can also, as I said, offer different views with more or less details, eg with higher font sizes.

That is for example valuable for users viewing content on a tv screen, which might have large resolutions and lower pixel DPI and still you need larger text for the higher distance of the user. So in the end it should be a user decision to not only zoom per device finger gestures, but also to offer font size settings via your UI.

Bye, Olaf.

 

[audiopro]

I have read all the articles suggested but I am still not sure of what the definitive solution is.
Is the @media screen variable reliable across all devices?

You say that the need to pan is unsatisfactory so if we are to create a 'one size fits all' website, the display needs to appear correctly on a small screen and then be enlarged to fit a larger screen as I stated in my OP.

My original post was simply to establish a reliable method, used by website designers, for detecting which version of a website should be presented to each user.


Keith

http://www.studiosoft.co.uk

 

[Olaf Doschke]

Well, you can't create a one size fits all website. That's what I am meaning with "different views with more or less details".

So eg yoiu have a multi column site, that adapts to less columns for smaller widthes. That can work even on high resolution devices, if they report a lowe device-width than width and so you are "tricked" into thinking of this decvice having smaller pixel dimensions.

The other way is to know what pixel density you have and adapt your page accordingly.

If the user can decide to have 1 column only, even though media queries would suggest 3, if you simply offer the option to the user to choose the 1 column design though there technically is vast space, you can also adjust the font size so that this one column is populated with less text per line and really seems zoomed.

That's what you should allow aside of making automatic decisions.

And finally: Yes, the values you get are more precise than ever. People finding device-width to be too low don't understand this is by intention, because bitmaps pixels are zoomed to that virtual pixel size anyway. And if you offer a manual override of the automatic detection done on device-width/height rather than widht/height, then you can live with false detections anyway. And some poor old guy with weak eyes can not only take the default browsers zooming to adjust font size, he can choose the 1 column layout on his HD monitor, even though it normally would show the 3 column layout.

That way you don't depend on media queries to be an absolute truth.

Bye, Olaf.

 

[Borvik]

There are plenty of websites that work across devices and are still readable.

The need to pan, or scroll horizontally, isn't really ingrained into the habits of the user especially on devices other than the desktop. Sure touch panels allow you to swipe to scroll left/right (avoiding use of horizontal to avoid confusion with device orientation), but to save screen real estate they have usually removed the scrollbars so there is no indication to the user for the need to scroll other than run-off text and/or images. For mobile users it is best to design a scroll in one direction only: up/down - this is what they are used to and expect.

-------------------------------------------------------------

As for a definitive solution, the web is constantly changing giving us new ways to do things - so the solution changes.

For now, the pieces of a generally accepted practice have all been mentioned above - here it is condensed:

As Olaf has suggested, use [tt]<meta name="viewport" content="width=device-width, initial-scale=1.0">[/tt]. That goes in the <head>. If you don't specify any font sizes, and let the browser use the default size it should be readable on any device.

As Vacunita mentioned: for divs, imgs, other other tags that need sizes set use sizing in percents, and ems. This will ensure a proper fit for whatever device you are using.

Then you can use [tt]@media screen and (min-width: 6in){ }[/tt] to set breakpoints for your elements to get different sizes (in percents and ems still) and positioning. Allowing your site to adapt to different layouts for different sizes of screens.

Finally in Olaf's last post, is a link for saving bandwidth by targeting appropriately sized images (background) to different devices. This allows a mobile user using 3G to get an image perfect for their screen and not waste bandwidth on a larger image a desktop user with more bandwidth can handle.

That I believe is about as definitive as it can get.

 

[audiopro]

Thanks guys, that is a great help.
The reason for asking this question in the first place was that I see so many websites that only work properly on some devices and I want my websites to be reliable right across the board. It seems that in the rush to encompass the latest development, designers forget that there are many people out there who are still using older devices and browsers.
We did a survey on one of our shopping sites and were surprised to discover that over 80% of customers use desktop or laptop devices to order rather than, what the experts tell us, that most shoppers use phones.

Keith

http://www.studiosoft.co.uk

 

[Olaf Doschke]

Just one advice to override automatic css adjustments: Simply also have alternative CSS styles with some or all aspects hardcoded, which you can load to override the decisions of a default media query CSS and users can decide to have for example 1 column layout also on a tv. You can still adjust some things based on dpi resolutions and column count either detected or determined by max-width or max-device width queries or chosen by the user by a CSS file.

Notice you can do some computations with CSS with Calc(), too.

Bye, Olaf.

 

[ChrisHirst]

Screen dimensions;

http://www.w3schools.com/jsref/prop_screen_width.asp

and browser window dimensions, just in case the user is not running their browser at "full screen",

http://www.w3schools.com/jsref/prop_win_innerheight.asp

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[vacunita]

People will use the device that is most convenient for them to do what they need to do. If the Website currently does not work well in mobile devices, people will go to their desktops or laptops to order if it works better there. Though you may very well lose some in the process.

Text size and readability, should come from the design for mobile devices. i.e In general the font-size you use, should not change because its a different device, it should be adapted by the device.
They key element here for this, is as Olaf suggested, and Borvik pointed out: <meta name="viewport" content="width=device-width, initial-scale=1.0">.

This generally adjusts the website to the actual device, closing in and making text readable.

Try this code, with and without the meta tag on a mobile device and see what it does.

<head><title>Mobile Adjustment</title>
	
	<style type="text/css">
		div.container
		{
			
			max-width:80%;
			background-color:#f2f2f2;
			padding:10px;
			overflow:hidden;
			margin:10px;
			margin-left:auto;
			margin-right:auto;
		}		
		
		div.container p
		{
			font-family:Verdana, sans-serif;
			font-size: 12px;
			text-align:center;
			
		}
	</style>
</head>
<body>
	<div class="container">
		<p>This text should only be readable in desktop browsers</p>
	</div>
	
</body>
</html>

While all the HTML and CSS, are exactly the same, the only difference is the meta tag that auto adjusts the screen on the mobile device.

This is not a magic solution that will make your sites mobile immediately, but it makes it so precise screen sizes and precise fonts are not necessary.

Having a general idea of what general dimensions screen sizes are used is enough to make the website functional.

Your media queries should target the most common sizes, as ranges. i.e @media screen and (max-width:1024px) for instance would apply to anything below 1024px wide.

As has been said, design for the desktop first, but always considering what it may need to look like on a mobile device, then remove or reposition elements so its functional on a mobile device.

If you are making an online store, look at Amazon.com for instance how it changes its sotre layoit on mobile devices. It adjusts it so that its a single column instead of a grid.

These are the types of design choices you need to be aware of when making the website, and how its going to easily and painlessly adjust to the screen sizes.

Knowing that a specific device has a specific dimension is not helpful, because there are so many devices, with so many different dimensions it would be very difficult to design layouts for all of them.

Again your designs should be generic enough that they work on 300px wide and 450px wide or 600px wide generally the same. and have suitable changes as the screen grows.







----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech