Register now or log in to join your professional community.
Hello Murad,
If by boilerplate you are asking for a list of various settings that can be used to identify individual devices then i recommend visiting the most common manufacturers websites for such settings as they often change with new models and rarely do existing templates match the newest models
That being said
I would not recommend that you take a device oriented approach
Instead what i would suggest is that you look at your Website or Application from a user interface perspective
A user does not care if mobile has a slightly modified interface than that of a tablet, he only cares for the ease in which he can use a system and the manner by which the information is portraid
That being said i recommend you look at your website in regards to size media queries as4 levels in regards to width:
-479px or less (small display, mobile portrait)
-480px -969px (medium display, mobile portrait / small landscapes and tablet portraits)
-970px -1399px (large display, tablet landscapes and non-HD desktops)
-1400px+ (HD displays)
These4 levels will help cover virtually every screen resolution, device and orientation
Additionally identifying iOS devices or Macs is relatively easy using -webkit-min-device-pixel-ratio which depends on the type of device you wish to target
As a final note, always use the following format when writing media queries:
@media only screen AND (min-width : WIDTHpx) AND (min-width : HEIGHTpx), only screen AND (min-height : OTHER-HEIGHTpx);
This is a highly simplified explanation but i hope it helps you somewhat decide what is the best approach for yourself and aid you in perfecting it
Do you need help in adding the right keywords to your CV? Let our CV writing experts help you.
