Viewport scale/zoom (portrait) - CSS-Tricks

This topic is empty.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
August 23, 2016 at 3:05 am #244805

grimski
Participant

I’m working on a couple of web ‘apps’. basically they’re a series of static html pages with previous/next links to navigation through the pages. Other than that they contain standard content elements as well as some slideshows and fancybox’s. They’re not required to be responsive (mobile) so I have a min-width (960px) set on the body tag as well as a max-width (1100px) set on a child container.

I had some issues with content being zoomed in on iPad as well as not reseting when you changed the orientation from landscape to portrait and vice versa. I seem to of resolved this with:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

This works fine for portrait but the content is chopped off in landscape. But I guess the issue is the content now can’t be zoomed? The previous problem I had was when I zoomed/adjusted the webpage in portrait then rotated to landscape the layout would then be off in landscape – when it was previously ok.

Here’s an example: http://moymadethis.com/example/unit-1/session-1/slide-1.html

Is there a way to have the content scale/shrink in a portrait viewport when there isn’t enough room but maintain it’s actual size in landscape?

I’m open to suggestions, I’m just trying to find the right solution for this. Every website I’ve done has been responsive for years so I haven’t touched the viewport stuff for ages!

Thanks in advance!

August 23, 2016 at 5:20 am #244809
Beverleyh
Participant
Not sure if this is what you want;
```
html { -ms-text-size-adjust:100%; -webkit-text-size-adjust:100% } /* prevent adjustments of font size after orientation changes in IE and iOS */
```
August 23, 2016 at 7:29 am #244810
grimski
Participant
Yeah I have that set on the html tag.

Would I be better of using something like:
```
<meta name="viewport" content="width=960">
```
But I suppose that wouldn’t allow the content area to grow in width if there was more available space?
August 23, 2016 at 3:53 pm #244844

ztgst
Participant

You should try remove your min-width an only set width and max-width, the tablet had a width of 768px in portrait, less pixels that your min-width.

I recommended no limit the body max-width,min-width you should use a main wrap or something like that, you can find many examples.

August 24, 2016 at 2:31 am #244856
Beverleyh
Participant
Would I be better of using something like: <meta name=”viewport” content=”width=960″>

But I suppose that wouldn’t allow the content area to grow in width if there was more available space?

OK, how about if you only apply the ‘width=960’ viewport on screens that are 960px or less. On larger devices, use ‘width=device-width’. You can do it with JavaScript and matchMedia.

First make sure that your viewport tag is in the <head> of your web page;
```
<meta name="viewport" content="width=960">
```
Then add this JavaScript to the bottom of your page – above </body>
```
if (window.matchMedia) {
    var mq = window.matchMedia('(max-width:960px)'),
        viewport = document.querySelector('meta[name=viewport]');
    mq.addListener(checkViewPort);
    checkViewPort(mq);
    }
function checkViewPort(mq) {
    mq.matches ? viewport.setAttribute('content', 'width=960') : viewport.setAttribute('content', 'width=device-width');
    }
```
August 25, 2016 at 1:45 am #244888

grimski
Participant

@Beverleyh thanks for that, I’ll give this ago!

I know this is a bit awkward – responsive but only up until a point! So this is ‘responsive’ but only to a set width and then it just zooms/shrinks if it’s below that’ll be great! :)
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

The forum ‘CSS’ is closed to new topics and replies.