This project is read-only.

Viewport meta tag and issues with high resolution mobile devices

Jan 13, 2015 at 12:01 PM
I'm using Bootstrap 2 for SharePoint 2010, and I've noticed that sites are not switching to the lower screen width breakpoints. Of course this is due to the high resolution of newer devices. Even in portrait mode, my own Galaxy S5 had a screen width of 1080 pixels. This means that all of the nice touch-friendly and smaller screen design features are not appearing.

I've also noticed in the code that there is no viewport meta tag. I'm wondering why this is, since even Bootstrap 2 includes that. Was there a particular reason not to include it with SharePoint am I missing something (probably)?

Here's what I see in the Bootstrap 2 HTML files:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I do realize I should move to Bootstrap 3 and SharePoint 2013--that's in the works, but not today.

Thanks!
Jan 14, 2015 at 11:37 PM
I am not sure why the viewport is missing from B2 for 2010 as it is needed. I will look into getting an update out to correct this.

As for the resolution issue, yes, that is a problem. I have been using updated media queries similar to:
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 
  
  /* Retina-specific stuff here */

}
This was found at http://css-tricks.com/snippets/css/retina-display-media-query/.

Eric
Jan 15, 2015 at 12:54 AM
Thanks for the information. I should have added that the problem for my phone and other devices I've tested with was solved simply by adding the viewport meta tag, but I understand that the additional media query is important to fix additional device issues. Without the viewport line, it doesn't seem to work for any mobile device.