If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
Like Tree1Likes
  • 1 Post By Vapr_Arts

Thread: How does responsive website scaling really works?

  1. #1
    Junior Member
    Join Date
    Aug 2015
    Member #

    How does responsive website scaling really works?

    Just got confused using dev tools from browsers to test how the site behaves with different resolutions and perform better on smartphones and tablets.

    The tools works using pixels, but most top smartphones use really high resolutions like 2560x1440 and even some with 3840 x 2160 like the new sony Z5.

    Things is even though they have high res, their physical screen is still small. How can I prevent the phone browser displaying the website like It's on huge monitors? You guys know how ugly smartphone non-optimazed codes are with those really small letters having to make you zoom with your fingers.

    Some awnsers here KINDA cleared out some points:

    javascript - Responsive CSS with high-res smart phones and tablets - Stack Overflow

    But since ''pixels in CSS declarations are abstract and not related to real-world pixels'', how do I actually work with the scaling tools? If it's about proportions, how can I know if im coding for a smartphone or a monitor with similar width-height proportions?


  3. #2
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Member #
    544 times
    Its because of pixel ratios. I really never took the time to look too much into it so i may be wrong.

    It might be better understood if i give an example. I have an iPhone6. The physical screen size is 750px by 1334px, but the phone has a 2px ratio so those numbers are divided by 2 making the css screen size actually only 375px by 667px.

    Again i might be wrong! I didnt really take the time to learn why its different I just use tools to emulate what it will look like on different devices or use the actual devices if I have access to them.

    Sent from my iPhone using Tapatalk
    brandMatt likes this.

  4. #3
    Senior Member breno's Avatar
    Join Date
    Feb 2015
    Member #
    29 times
    I find handy.
    Also don't forget this meta tag in your head <meta name="viewport" content="width=device-width, initial-scale=1">

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
All times are GMT -6. The time now is 04:24 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: