1

I have almost always used $(window).width() to check the viewport width. It normally works for both browsers and devices. But for a website on which I need to show a particular splash screen if viewport width is less than 768px, this is not working. It gives correct width upto a point but below that it keeps giving 980px howsoever narrow I make the browser. There are a few particular conditions for this site:

  1. This site was responsive in beginning (using bootstrap) but then made non-responsive. For this we removed viewport meta tag and set following rule in css that overrides its responsive widths:

    .container{ width: 1170px; }

  2. If I resize the whole browser i.e. the window that contains all browser tabs, then it does give correct width (less than 980px also, which is the desired behaviour), but if I use development tools and use the mobile layouts from there then width is never reported to be below 980px.

  3. It would not have mattered that it worked on resizing only the main browser window, but the issue is that it is not working in devices as well. I added an alert and on mobile devices, again width is never alerted to be less than 980px.

Can someone please suggest some solution for this or explain why it is not working as expected?

Mohit Bhardwaj
  • 9,650
  • 3
  • 37
  • 64
  • Maybe this can help you: http://stackoverflow.com/a/11310353/4108884 – Samuil Petrov May 05 '17 at 11:12
  • Thanks @MrLister. Is the simulation always to 980px width? I mean it's not because I have set it somewhere in my css, but it happens for all sites without viewport meta tag? – Mohit Bhardwaj May 05 '17 at 11:24
  • @SamuilPetrov I tried the solution you linked to, to get viewport width instead of `$(window).width()`. Though it alerted widths when I used developer tools responsive layouts, it still does not work in mobile and always alerts 1170px in mobile. Perhaps that's because I have not used viewport meta tags? – Mohit Bhardwaj May 05 '17 at 11:30
  • @MrLister yes, adding viewport meta tags corrected it. Now, it gives correct `$(window).width()` for mobile e.g. 360px and also in developer tool responsive layouts, it reports the width that is specified for that layout. Adding these tags creates other issues in my site, but your solution worked for this question. If you can add this as an answer I will mark it accepted. Thanks. – Mohit Bhardwaj May 05 '17 at 11:41
  • OK, I posted an answer. – Mr Lister May 05 '17 at 12:18

1 Answers1

4

I can't seem to find any authoritative source, but there are many pages that mention smartphones assume a website is 980px wide unless told otherwise.

Apple's developer site for instance says

The majority of webpages fit nicely in the visible area with the viewport width set to 980 pixels in portrait orientation, as shown in Figure 3-4. If Safari on iOS did not set the viewport width to 980 pixels, then only the upper-left corner of the webpage, shown in gray, would be displayed. However, this default doesn’t work for all webpages, so you’ll want to use the viewport meta tag if your webpage is different. See Supported Meta Tags for more on viewport.

Figure 3-4 Comparison of 320 and 980 viewport widths

enter image description here

(Incidentally, it was the iPhone which first did this, but other phones soon followed.)

So the solution is either to put

<meta name="viewport" content="width=device-width">

into the head (in your case, back into the head), or, acknowledge that the site is now not-responsive, and will not perform optimally on a phone!

Mr Lister
  • 45,515
  • 15
  • 108
  • 150