Test Mobile Devices with Chrome Devtools – Howto

Press F12 or just open Chrome Dev Tools.
Click on the Toggle Device Icon (marked in blue).

In your browser window, you will see this resolution modifyier:

Modify according to your needs to test different screen resolutions.

NOTE: Screen Resolution CANNOT be simulated by changing the browser window size 😉

Mobile Usability – Custom Scrollbars

On mobile devices, Usability is everything.
Because of this, standard elements are often designed broader and larger.

Example of a 30px wide and 100px thumb custom scrollbar:

/*A custom scrollbar is configurable. 
Here, it is broader than the standard.
This way, it is easier to use on touchscreen 
or other small or mobile devices.*/

/* width */
::-webkit-scrollbar {
    width: 30px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    height: 100px!important;
    background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}
/*end custom scrollbar*/

Pixel sizes – Mobile – Screen – Resolution -Definition

This is a compilation from the Web. I do not know the original author. As I am good at compiling information, I think it will be useful, though.

In case you are the author of this and can prove it, please drop me a line so we can link to your content.

Standard Size Ratio Definition

16:9 Ratio
4:3 Ratio
3:2 Ratio
2:1 Ratio