#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2018
    Posts
    35
    Rep Power
    1

    scaling and zoom


    hello, i have an issue with scaling that i cannot resolve.

    not to be melodramatic but an explanation is necessary for those that may not fully understand this problem. I've been using internet since 1996. I remember when there was no Google (msn search and altavista were popular outside of Yahoo! web directory.) I remember many things from back then. Anyway, up until Windows 8, i believe, webpages were 100% zoom or actual size. I didn't have a Windows 7 until 5 years ago, then i bought a laptop with Windows 8, then i bought 8.1 pro. Everything is not 100% by default. Web pages are scaled or zoomed to 125%. Even when the browser reports 100%. My images look awful because they are scaled. I cannot find a way to make it 100%. I found a hack on Windows 10 that works but it is not legal html/css. I use the css zoom in the html element.

    my css file:
    html { zoom: 0.8; }

    does anyone know how to control this? it pisses me off. I don't want my webpages to be scaled beyond 100%. atleast Windows 10 shows the zoom default to be 125% but I cannot get it zoomed to 100% without the html hack. Please help. There must be a way to do this.
  2. #2
  3. Wiser? Not exactly.
    Devshed God 2nd Plane (6000 - 6499 posts)

    Join Date
    May 2001
    Location
    Bonita Springs, FL
    Posts
    6,271
    Rep Power
    4193
    Pages are not scaled to 125%. Not sure where you're getting that idea from. Either you increased the zoom on your browser or something else is doing it for you.

    Given your talk about windows, I suspect you might be talking about the scaling feature built into windows. If so, this has nothing to do with your browser/page/etc nor is it something you can control nor is it something you should try to compensate for. It's a feature of windows so that people with large or high resolution screens can scale things up to make things easier to use. For example I use it on my HTPC because otherwise a lot of programs are simply unreadable on the TV because the UI/Font is too small.

    This display scaling windows does is 100% by default in most cases. I think if windows detects a large/high-resolution monitor it may adjust the scaling automatically when first installed but you can always go in and change it back to 100% if you'd prefer. If I remember right last time I installed windows on my HTPC it recommended a scaling of 150% and defaulted to that because of the huge TV as the monitor, I adjusted it down to 125%. All of my desktops and my laptop all default to 100%.

    Comments on this post

    • Paul-Ninja agrees
    Recycle your old CD's



    If I helped you out, show some love with some reputation, or tip with Bitcoins to 1N645HfYf63UbcvxajLKiSKpYHAq2Zxud
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2018
    Posts
    35
    Rep Power
    1


    so the problem must be the laptops and the system scaling.
    This is very annoying because anyone with scaling may think that my photos suck.
    i have the best macro lens that i can buy. The scaling destroys the image quality.

    on my XP desktop, the image looks fine. 100% actual size. all is good.
    Windows 10, the image is clearly scaled but Edge shows page zoom at 125%. so i can set it to 100% and all is good.
    but then i wonder: now i have to ask all of my visitors with a laptop or hd display to zoom out to 100%. that is bull****.

    the real problem is Windows 8.1. The photo looks exactly like the scaled Win10 photo.
    yet IE11 shows page zoom at 100%. I'm not blind. The image is scaled. I have to set the page zoom at 80% for the image to look normal actual size.

    although, the photo of the lucilia fly was made with my 70-300mm telephoto lens. the quality is not so good to begin with. the scaling makes it look worse.

    i was hoping for a way to detect scaling on my images.
    anyway, Thank you kicken.
  6. #4
  7. Wiser? Not exactly.
    Devshed God 2nd Plane (6000 - 6499 posts)

    Join Date
    May 2001
    Location
    Bonita Springs, FL
    Posts
    6,271
    Rep Power
    4193
    I can't really speak to windows 8, never cared for it so never used it beyond about an hour. I don't have any issues with edge scaling things on my desktops as far as I can tell by some quick tests (I don't use it typically). The few sites I pulled up all render at 100%.
    Recycle your old CD's



    If I helped you out, show some love with some reputation, or tip with Bitcoins to 1N645HfYf63UbcvxajLKiSKpYHAq2Zxud
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2018
    Posts
    35
    Rep Power
    1
    I think now that this is really a Windows 8/8.1 problem. i use this laptop for internet activity because i have xampp running on my Windows 10 for development. I miss a desktop pc but i am not rich, so i have to make due with my laptop. I got tired of being left behind on Windows XP so i bought a Windows 8 laptop. Yet Microsoft buried it with 8.1, so i had to upgrade to the pro version. suddenly 8.1 was axed in favor of Windows 10. I got used to the start screen but this scaling issue is horrible. I really don't have this problem on Windows 10.

    guess i will just move on. Thank you for clarifying matters kicken. You really are a Fantastic computer guru. Very smart. I appreciate you.
  10. #6
  11. Code Monkey V. 0.9
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Mar 2005
    Location
    A Land Down Under
    Posts
    2,427
    Rep Power
    2105
    The "zoom" difference is worse if you look at images on an iPhone or tablet. Anything with a retina screen will render photos at 100% terribly. I work with designers, and I've heard it too many times to count...

    The fix for this, which would help your issue too, is to save the images at around 200% of the size that they should be displayed as, and use CSS to control how big they actually display.

    So, an image that you want to show at 150x150 pixels should be saved at 300x300 pixels and have this sort of CSS set on it:

    Code:
    img.my-class {
        width: 150px;
        height: auto;
    }
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2018
    Posts
    35
    Rep Power
    1
    hello Catacaustic, thank you for posting this info. I've tried it on my photos and it really keeps the image from zooming. But you are right about needing a larger size. I really wish that we could find a way to detect scaling or zooming. I originally created a javascript file that works on resize to maintain font size and image size and it works but it is hard coded. I am still trying to figure out how to stop using inline script. all tutorials that i can find use jquery. anyway, thank you very much for the tip.
  14. #8
  15. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Do your pages each have a meta viewport element like the following?
    Code:
    <meta name="viewport" content="width=device-width, initial-scale=1">
    Also you might want to consider using the srcset attribute to give browsers the option of displaying a higher resolution version of your images.
    the new code
    https://developer.mozilla.org/en-US/...ponsive_images
    https://css-tricks.com/responsive-im...ns-use-srcset/
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2018
    Posts
    35
    Rep Power
    1
    Hello Kravvitz, thanks for mentioning this srcset. I completely forgot about this. as i've mentioned before, i haven't studied web design or programming since around 2009. I remember css2 and css3 but i always ignored it because browser support was frustrating. I just started studying again last year in December. HTML5 and css3 are new to me. I had alot of trouble moving away from table layouts. I finally got the hang of divs with floats and clear. I'm finally comfortable with html5 and css3 but i forget some of it. I remember reading about srcset but it slipped my mind. excellent recommendation. Thank you.

    one thing i hate about modern designs is jquery. i just can't stand it. i prefer gold old fashioned javascript. i also noticed the csp which is new to me. very cool stuff happening nowadays except jquery. i'm sorry but i hate jquery.

IMN logo majestic logo threadwatch logo seochat tools logo