Set two different viewports setting via CSS or Javascript

Question

I'm trying to set two different viewport settings for different browser widths.

The first viewport setting is for devices wider than 680px width (especially for iPad and desktop devices):

The second viewport for devices under 680px width:

I was trying to solve the viewport width CSS media queries, to be able to ask for the current browser width:

    @media only screen and (min-width: 681px) {
 @viewport {
width: 1160px;
}
}

@media only screen and (max-width: 680px) {
 @viewport {
width: width=device-width;
 zoom: 1;
}
}

But it seems, my viewports were ignored by the browser. Someone has an idea, what the problem could be?

Thank you guys!

Answer 1

CSS Device Adaptation (the @viewport at-rule) is not well supported at this time. Specifically it is not supported on Safari desktop or mobile and is only supported in mobile Chrome since version 29. IE/Edge require a special prefix. So you should not rely on it for your current development as it may not behave consistently across platforms.

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport

Answer 2

What about to try:

@media only screen and (min-width: 681px) {
 @viewport {
  width: 1160px;
 }
}

@media only screen and (max-width: 680px) {
 @viewport {
  /* That will set the element to 100% of the viewport's width */
  width: width: 100vw; 
  zoom: 1;
 }
}

You can see this question: How to make the body width equal to the device-width automatically in CSS3 media query?

And this CSS-Tricks post: https://css-tricks.com/viewport-sized-typography/

Hope it helps