When developing websites, it is unthinkable not to use Google Chrome, even if just to check if all is working as intended. You may or may not enjoy it, but the fact is that "it" became the de-facto browser, and should be used as the main reference for the serious web developer.
A simple look at the browser market share data since June 2016 until June 2017 reflects its wide-spread usage.
Besides its usage ratio, Chrome also boasts the infamous Chrome Dev Tools - a large set of tools that lets you dig deeply into your website or webapp. One of those tools is the responsive device toolbar, which helps you visualise your style and layout through a different device format and size.
This, of course, helps tremendously today's web developer. On the same tool, you can look at the css styling and how its reacting to your target device, make changes on-the-fly and save the updated result. It still doesn't replace real device testing, as sometimes the rendering has different nuances, but already helps a lot 90% of the time.
While it gives you a nice range of devices to choose from, some of the most recent devices are missing, like Apple's iPhone 7 and 7 Plus, or Samsung's Galaxy S8 or S8+. These are important devices, which we should take into account when adjusting our mobile styling.
Nevertheless, the Chrome Dev Tools lets us create new devices to our please, which is awesome. Less awesome is the hard time you might have while searching for the real data to create the device profile.
I recently had a project that required a special care on the iPhone 7 and 7 Plus devices, and thought it was a good opportunity to create its device profile. The Android version of a similar segment (would be the Samsung S8) would be a great addition also. But while searching, I found inaccurate details, incorrect dimensions, or just the physical dimensions (which is not what we need). There was less consensus than expected.
Thankfully, the good guys at mydevice.io made a great place with the correct required details for most devices, including most of those I was searching for. The remaining came from another great source, at https://material.io/devices/.
The dimensions we require are the CSS width and height in pixels. Don't mistake those with the device resolution's width and height pixels. These high-resolution devices use a device/pixel ratio, which allows them to display a high-resolution (high count of real screen pixels, for a smoother text) while still being compatible with standard desktop-screen pixel sizes of existing webpage.
If you don't have the CSS Dimensions, you can calculate them easily: simply divide the screen dimension by the device pixel ratio. Using the iPhone 7 as an example, we know the screen width in pixels is 750px and the ratio is 2, so:
For the height, just do the same math. Simple :)
A point worth noticing is that these devices also can identify themselves through User Agent strings. Even though is not a recommended practice, sometimes is the only way to deal with some special features or unique bugs. Chrome DevTools allows us to add a User Agent string, which may be useful for better device emulation when testing detection using Javascript, PHP or other libs.
Before proceeding, lets just condense the data for the smartphones we need:
Ok, we should have all we need, lets begin!
1: Open your developing webpage, and fire the Chrome Dev Tools (F12 for Windows, Cmd + Opt + I for Mac).
2: Click on the Google Device Toolbar shortcut (Ctrl + Shift + M).
3: Click on the drop-down selector (1) and choose "Edit". Then, click on "Add custom device" (2).
4: Lets add the iPhone 7. Fill in the details with the data from our table, save and close. You can now select the new settings from the drop-down, and adjust your styling to the new target device sizes.
You can keep adding new or specific devices, and not just smartphones, but also tablets and awkward-sized monitors. Don't forget SmartTV screens - they're getting some traction too. People are finally starting to browse on them.
I hope this was helpful, and comment away if you please.
Cheers!
A simple look at the browser market share data since June 2016 until June 2017 reflects its wide-spread usage.
This, of course, helps tremendously today's web developer. On the same tool, you can look at the css styling and how its reacting to your target device, make changes on-the-fly and save the updated result. It still doesn't replace real device testing, as sometimes the rendering has different nuances, but already helps a lot 90% of the time.
While it gives you a nice range of devices to choose from, some of the most recent devices are missing, like Apple's iPhone 7 and 7 Plus, or Samsung's Galaxy S8 or S8+. These are important devices, which we should take into account when adjusting our mobile styling.
Nevertheless, the Chrome Dev Tools lets us create new devices to our please, which is awesome. Less awesome is the hard time you might have while searching for the real data to create the device profile.
I recently had a project that required a special care on the iPhone 7 and 7 Plus devices, and thought it was a good opportunity to create its device profile. The Android version of a similar segment (would be the Samsung S8) would be a great addition also. But while searching, I found inaccurate details, incorrect dimensions, or just the physical dimensions (which is not what we need). There was less consensus than expected.
Thankfully, the good guys at mydevice.io made a great place with the correct required details for most devices, including most of those I was searching for. The remaining came from another great source, at https://material.io/devices/.
The dimensions we require are the CSS width and height in pixels. Don't mistake those with the device resolution's width and height pixels. These high-resolution devices use a device/pixel ratio, which allows them to display a high-resolution (high count of real screen pixels, for a smoother text) while still being compatible with standard desktop-screen pixel sizes of existing webpage.
If you don't have the CSS Dimensions, you can calculate them easily: simply divide the screen dimension by the device pixel ratio. Using the iPhone 7 as an example, we know the screen width in pixels is 750px and the ratio is 2, so:
750px (screen width) / 2 (device ratio) = 375px (CSS width)
For the height, just do the same math. Simple :)
A point worth noticing is that these devices also can identify themselves through User Agent strings. Even though is not a recommended practice, sometimes is the only way to deal with some special features or unique bugs. Chrome DevTools allows us to add a User Agent string, which may be useful for better device emulation when testing detection using Javascript, PHP or other libs.
Before proceeding, lets just condense the data for the smartphones we need:
| Device | CSS width | CSS height | Device pixel ratio |
|---|---|---|---|
| iPhone 7 | 375px | 667px | 2 |
| iPhone 7 Plus | 414px | 736px | 3 |
| Samsung Galaxy S7/Edge | 360px | 640px | 4 |
| Samsung Galaxy S8, S8+ | 360px | 740px | 4 |
Ok, we should have all we need, lets begin!
1: Open your developing webpage, and fire the Chrome Dev Tools (F12 for Windows, Cmd + Opt + I for Mac).
2: Click on the Google Device Toolbar shortcut (Ctrl + Shift + M).
You can keep adding new or specific devices, and not just smartphones, but also tablets and awkward-sized monitors. Don't forget SmartTV screens - they're getting some traction too. People are finally starting to browse on them.
I hope this was helpful, and comment away if you please.
Cheers!
Comments
Post a Comment