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 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.
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.
Get the latest Mobile Web Report for Q1 2017
Learn about the latest trends in the mobile device usage:
All device usage statistics are based on real traffic to a global network of partner websites using DeviceAtlas for content optimization and redirection.Download now