Home/ Questions/Q 9181509
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T18:19:54+00:00

I have a responsive site with a desktop width > 980px and a mobile

  • 0

I have a responsive site with a desktop width > 980px and a mobile width < 768px. I want tablets to view the site at a 980px viewport, but mobile to view at device width.

Specifically, I want the following:

width = device width
if width >= 768px
  viewport = 980px
else
  viewport = width

What is the best way to approach this problem? I don’t want to check the useragent on the server.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    From what I understand, you want to do this:

    $(document).ready(function() {

    // lets push in a viewport 
    var vpw = (screen.width>=768)?'980':'device-width';
    $('head').prepend('<meta name="viewport" content="width='+vpw+'" />');

});

    and from what I tested, that works. (Which is a bit funny, because the viewport is written after the document ‘loaded’; you may see a little jump on screen, and YMMV.)

    — EDIT
    nowadays i just write this code in the head, like this

    <head>
  <script type="text/javascript">
    var vpw = (screen.width>=768)?'980':'device-width';
    document.write('<meta name="viewport" content="width='+vpw+'" >');
  </script>
</head>

    which is what monaca does, so I guess its ok
    https://github.com/monaca/monaca.viewport.js/tree/master

    • 0