Skip to main content
davidhelp
davidhelp
Inspiring
February 15, 2017
Answered

New laptop displays webpage differently

  • February 15, 2017
  • 4 replies
  • 2704 views

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

    This topic has been closed for replies.
    Correct answer Jon Fritz

    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.

    4 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    February 15, 2017

    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

    Nancy O'Shea— Product User & Community Expert
    Per Berntsen
    Community Expert
    Per BerntsenCommunity Expert
    Community Expert
    February 15, 2017

    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
    davidhelpAuthor
    Inspiring
    February 15, 2017

    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
    pziecina
    Legend
    February 15, 2017

    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).

    Jon Fritz
    Community Expert
    Jon FritzCommunity ExpertCorrect answer
    Community Expert
    February 15, 2017

    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.

    C
    cdeatherage
    Inspiring
    February 15, 2017

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

    Chris

    davidhelp
    davidhelpAuthor
    Inspiring
    February 15, 2017

    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

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