Knowing the most popular viewport sizes used by mobile devices is essential to make crucial decisions on optimizing websites for all mobile users. Check out the latest statistics on mobile viewport sizes based on DeviceAtlas web traffic statistics for Q1 2017.
What is a viewport?
Viewport is the visible part on the user’s screen which can be used for displaying online content in the browser. There is also the "viewport" HTML tag which allows web developers to signal to the browser how to treat the page’s dimensions and scale within the viewport.
Websites without the viewport tag, which aren’t using adaptive web design, are displayed on mobile in exactly the same way as they are displayed on desktop or laptop screens which have much bigger viewport sizes than phones. As a result, they require zooming and horizontal scrolling which is one of the mobile-friendly fails reported by mobiReady (now discontinued) and the Google’s mobile-friendly test.
It's important to know that viewport size is provided in virtual or CSS pixels which differ from what device manufacturers list in smartphone specifications. For high-res phones, such as Samsung Galaxy S8 and iPhone 7, what the browser counts as 1 pixel contains more than 1 physical pixel of the screen. An example of this is the iPhone Retina display which has 4 physical pixels squared within every virtual pixel. Only for some older phones with low-res screens, 1 virtual pixel may equal 1 physical pixel.
Source: Smashing Magazine
Setting the viewport tag for responsive websites
Websites optimized for mobile typically include the following piece of code in its <head> section:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The viewport tag is used for scaling what’s visible on the screen to optimally fit the browser’s width according to the media query breakpoints which are set up later in the code.
Of course, using the viewport tag alone and hoping that content resizing is enough is a recipe for mobile-friendly failure. Today, it is essential to offer sophisticated device optimizations based on server-side device detection which can address varying device characteristics.
Most used viewport sizes today (virtual pixels) in Q1 2017
We analyzed DeviceAtlas statistics for Q1 2017 to let you know which viewport sizes (virtual pixel screen resolutions) were the most popular in selected countries based on website visits from a network of partner websites.
We noticed that 360x640 is the most popular viewport size worldwide followed by 375x667. These two sizes are leading in 17 countries out of 20 we analyzed with the only exceptions of Argentina, India, and Russia.
Detect usable pixels with DeviceAtlas
DeviceAtlas lets you detect the device's size of the default browser's viewport when the device is held in its default orientation and the zoom is set to 100%. This capability is particularly useful in web optimization jobs where it is important to know what the visible part of the screen is.
You're probably aware that it is possible to get viewport sizes using JavaScript but bear in mind that each client-side query has an impact on web performance. DeviceAtlas can return information on viewport and over 165 other properties without any JavaScript-related performance overhead. This is done using a high speed server-side lookup on the User-Agent that gets passed in every web request.
DeviceAtlas data is always reliable and up-to-date, so you don't need to run any code on the client-side that might impact on performance. Not only can you handle your current traffic loads how you want in real-time, but you can also analyse historical traffic with server logs.