New laptop displays webpage differently

[davidhelp]

Hello

My new laptop displays webpage size differently. Also menus etc on the laptop.

It is a 15.6" 1920 x 1080 display with Windows 10

My desktop pc has the same screen resolution but a 27" display and uses Windows 7

I use Dreamweaver CS6.

A webpage I have measures 900 pixels wide and if I use a tape measure it shows 11" on the Windows 7 screen of my desktop pc.

On the Windows 10 laptop the screen measures about 6 and 3/8ths"

Something to do with DPI I think. The Windows 7 pc says 96dpi but I do not know what Windows 10 says as the same screen is missing the DPI number. They have a sliding scale from 100% and recommend 125%. This shows the webpage as described above. This is any webpage mind you.

Anyone experience this?

David

[cdeatherage]

Are you using the same version of the browser on both computers? If so, are they both set to the same zoom?

Chris

[davidhelp]

Hello

I use Firefox. The zoom is set the same for both. Ctrl + 0

The webpages look the same with IE11 as well.

I bought the laptop with the 1920 x 1080 screen to match the desktop pc monitor resolution but find the display of the webpage looks too small on the new laptop with Windows 10. When I create a webpage it looks too small even though the dimensions are the same if viewed on the desktop pc where it is bigger looking.

David

[Jon Fritz · Accepted solution]

The reason things are different is because your laptop is using a high pixel density screen. You said so yourself that you have the same resolution as your desktop, but on a much smaller screen. Basically that means you have more physical pixels crammed into a much smaller space the benefit being your eye can't see the dots and things look clearer.

The thing is, there are 2 kinds of pixels in web design that you need to understand in order to make sense of what you're seeing: physical pixels in the monitor (of which, your laptop has many, many more per inch than your desktop) and CSS (virtual) pixels.

There's a lot online explaining the differences between "physical pixels and css pixels" and there are things you can do as a developer to mitigate the issues that come up between each screen type using CSS Media Queries, <picture> tags and the "srcset" attribute.

[Per Berntsen]

You have a large and a small screen, both with a resolution of 1920 pixels horizontally.

To fit 1920 pixels on the small screen, they have to be a lot smaller than those on the large screen.

Consequently, 900 pixels will have a smaller physical width on the smaller screen.

This is perfectly normal, and to be expected.

You may find a screen ruler more helpful than a tape measure, since it measures in pixels.

I use this one: Free Screen Ruler With Delphi Source

[davidhelp]

Hello

This link shows where to change the dpi in Windows 7. A similar screen is found in Windows 10

I could change it to a higher number from the 100% / 96dpi I have now, then it would more closely match what I see on the 2 computers.

Microsoft recommends 125%. I am not sure what dpi that is but this means people will change their settings to suit themselves and be viewing the webpage differently then I see it.

I use a Firefox add on called Web Developer that has a ruler. Another ruler I tried verified I have it set at 96dpi

For webpages I guess using percentages would be best and then test on different devices. I have a laptop, a desktop pc and a 10" tablet and a 5.5" smart phone.

Change Your Monitor’s Dots per Inch (DPI) Setting - dummies

[pziecina]

You cannot measure the css pixel size with a ruler on the screen, as this misses one essential measurement, viewing distance -

https://www.w3.org/TR/css3-values/#reference-pixel

Then there is the problem of how browsers handle anything that works out to a 0.5px value. About 15 years ago there was a lot of articles about this, with some browsers rounding down, and other browsers rounding up the 0.5px. This was not to bad on standard monitors of that time, but then we got hd monitors, hi-dpi monitors, and now we have ultra-hi-dpi momitors.

Pixel perfect precision on the web is impossible, unless one has every monitor, device, tv, or whatever a user can use to view a web page with, and then creates a media-query for every one of them. Even % values are becoming unreliable to use, with the introduction of new layout methods such as css grid layouts. With css grid layouts % values can now be absolute values.

The only thing you can rely on, is that your page should look good, and that everything will not stay the same.

If you use -

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

Then the width statement tells the browser to zoom-out/in on the page to fill the viewport, making the actual size a complete unknown, except to say it fills the viewport, whatever it is. (up to a maximum value if you set one, and even then you cannot be 100% accurate as to the actual size).

[davidhelp]

Thanks for the

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

I googled it and am reading how to use it for different size screens.

Here is a link on how to use and a link to check what your site looks like in a cell phone.

I put in a homepage of mine and all kinds of suggestions show up  : )

Move the mouse over the page they display and it expands to cell phone size.

How to configure the viewport for responsive pages

Guideline states: 'Design your site for all device types and sizes, including desktops, tablets, and smartphones.'

[davidhelp]

Here is a site with screenshots. I was only looking at my desktop for the most part. Now I have to think how others would look at the webpage. My co-workers stare at their cell phone all day at websites.

https://webdesign.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972

[pziecina]

For checking your site on mobile devices, try -

https://www.sitepoint.com/use-mobile-emulation-mode-chrome/

davidhelp  wrote

  Guideline states: 'Design your site for all device types and sizes, including desktops, tablets, and smartphones.'

It is worth checking out using css flexbox for this, and within the next 2 years becoming familiar with using css grid layouts, (combining the 2 is the future).

flexbox - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

css grid layouts, (well worth the few pence it costs) - https://www.amazon.co.uk/Grid-Layout-CSS-Interface-Web-ebook/dp/B01EGQ1QI8/ref=sr_1_2?s=books&ie=UTF...

There are a number of tutorials on the web and opinions about both layout methods, ignore them all, many are either outdated or written by someone who failed to grasp the concepts.

[Nancy OShea]

A 900 pixel wide website is not responsive and understandably quite small given your laptop's pixel density.  You might want to switch to a % width web page that takes up more real estate on Hi DPI screens. 

Nancy