switchon@lavalamp.biz
+27(0) 83 419 4851 / +27(0) 21 036 1165
Application & software development
Get A Quote

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact
    git workflow with multiple people
    Git Workflow With Multiple People
    Sep 1, 2020
    intergrating vuex in laravel and vue application
    Integrating Vuex Into Your Laravel Vue Application
    Sep 14, 2020

    Difference Between Screen Size, Resolution And Display Size

    Categories
    • Web Design
    • Web Development
    Tags
    • css
    • dsiplay size
    • resolution
    • responsive web design
    • screen size
    • view port
    • viewport size
    difference between screen size, resolution and display size
    difference between screen size, resolution and display size

    With a wide variety of different screen sizes, people often get screen size, resolution size, and display size mixed up or confused. So I am here to clarify and make things similar by ironing out the differences between the three sizes. As a web designer, understanding this and knowing the difference is crucial for responsive web design.


    Screen size (viewport)

    Most commonly used for CSS to allow web designers and web developers to create mobile friendly webpages.. It usually includes the most common and standardised viewport sizes. Measurements are usually in points. They are also proportionally smaller than resolution sizes.

    To get a comprehensive list of all viewport sizes and breakpoints, click here. If you can't find the size you are looking for click here to find your own.

    Desktops & Laptops


    1024×768 pixels or higher

    Apple Products

    iPhone

    iPhone XR - 414 x 896

    iPhone XS - 375 x 812

    iPhone XS Max - 414 x 896

    iPhone X - 375 x 812

    iPhone 8 Plus - 414 x 736

    iPhone 8 - 375 x 667

    iPhone 7 Plus - 414 x 736

    iPhone 7 - 375 x 667

    iPhone 6 Plus/6S Plus - 414 x 736

    iPhone 6/6S - 375 x 667

    iPhone 5 - 320 x 568


    iPod

    iPod Touch - 320 x 568


    iPad

    iPad Pro - 1024 x 1366

    iPad Third & Fourth Generation - 768 x 1024

    iPad Air 1 & 2 - 768 x 1024

    iPad Mini 2 & 3 - 768 x 1024

    iPad Mini - 768 x 1024

    Android Devices

    Phones

    Nexus 6P - 412 x 732

    Nexus 5X - 412 x 732

    Google Pixel 4 XL - 412 x 869

    Google Pixel 4 - 412 x 869

    Google Pixel 3a XL - 412 x 824

    Google Pixel 3a - 412 x 846

    Google Pixel 3 XL - 412 x 847

    Google Pixel 3 - 412 x 824

    Google Pixel 2 XL - 412 x 732

    Google Pixel XL - 412 x 732

    Google Pixel - 412 x 732

    Samsung Galaxy Note 10+ - 412 x 869

    Samsung Galaxy Note 10 - 412 x 869

    Samsung Galaxy Note 9 - 360 x 740

    Samsung Galaxy Note 5 - 480 x 853

    LG G5 - 480 x 853

    One Plus 3 - 480 x 853

    Samsung Galaxy S9+ - 360 x 740

    Samsung Galaxy S9 - 360 x 740

    Samsung Galaxy S8+ - 360 x 740

    Samsung Galaxy S8 - 360 x 740

    Samsung Galaxy S7 Edge - 60 x 640

    Samsung Galaxy S7 - 360 x 640


    Tablets

    Nexus 9 - 768 x 1024

    Nexus 7 (2013) - 600 x 960

    Pixel C - 900 x 1280

    Samsung Galaxy Tab 10 - 800 x 1280

    Chromebook Pixel - 1280 x 850

    Viewport sizes from Media Genisis


    Resolution

    Resolution is the number of pixels displayed on the screen. Measurement is usually in pixels.


    Display size

    Display size is measured in a diagonal line from the top of one corner of the screen to the adjacent bottom corner of the screen. These measurements are usually in inches.



    The image below perfectly describes how the three different sizes differ from one another.

    difference between screen size, resolution and display size

    Image from Kylejlaron.com

    Contact us


      Related posts:

      the differences between www and non-www url’sThe Differences Between www And Non-www URL’s onesignalHow To Setup And Use OneSignal For Web Apps angularUpdating A Primitive Type Variable From A Service In Angular how to deploy a backend api to azureHow To Deploy A Backend API To Azure
      Share
      95
      Katherine Comer
      Katherine Comer
      Katherine is a frontend web designer with an interest in Search Engine Optimisation and UI/UX design. She an avid Xbox player and a huge Tomb Raider fan.

      Leave a Reply Cancel reply

      Your email address will not be published. Required fields are marked *

      Lava Lamp Lab


      Like technology, a lava lamp constantly changes form, producing new conditions with every passing moment



      lava lamp lab facebook   lava lamp lab twitter   lava lamp lab linkedin   lava lamp lab instgram

      Services


      Application & software development

      Outsourced software development

      Project based resourcing

      Digital marketing & consulting

      Graphic design & consulting

      UI / UX design & consulting

      Contact Us


      +27(0) 83 419 4851

      +27(0) 21 036 1165


      switchon@lavalamp.biz


      Unit 4 Monaco Square,
      14 Church Street,
      Durbanville,
      Cape Town, 7550

      NBConsult Group


      nbconsult
      nbconnect msp
      nbclearning
      river broadband
      designer needed
      © 2023 Lava Lamp Lab (Pty) Ltd | All Rights Reserved | Privacy Policy
      Contact us now

        Application & software development

          Outsourced software development

            Project based resourcing

              Digital marketing & consulting

                Graphic design & consulting

                  UI/UX design & consulting

                    Lease an expert

                      Recruitment services

                        We are using cookies to give you the best experience on our website.

                        You can find out more about which cookies we are using or switch them off in settings.

                        Lava Lamp Lab
                        Powered by  GDPR Cookie Compliance
                        Privacy Overview

                        This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

                        Strictly Necessary Cookies

                        Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.

                        If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.

                        3rd Party Cookies

                        This website uses Google Analytics to collect anonymous information such as the number of visitors to the site, and the most popular pages.

                        Keeping this cookie enabled helps us to improve our website.

                        Please enable Strictly Necessary Cookies first so that we can save your preferences!

                        Cookie Policy

                        More information about our Cookie Policy