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
