Viewport script don't work on tablet/ipad

1,613 Posts

fourroses666 Reply #1, 11 years, 10 months ago

I have a site and like to show all content on tablet landscape and likt to do this by changing the viewport width.

When I set the below viewport this works great for landscape:

<meta id="viewport" name="viewport" content="width=1600">

But when having portrait the viewport width needs to be way smaller.

<meta id="viewport" name="viewport" content="width=1000">

I have the below script which does change the viewport when I look at the generated source on my desktop. But somehow it doesn't work on my ipad.

<script>
    $(document).ready(function() {
        if (screen.width > 1000) {
            document.getElementById("viewport").setAttribute("content", "width=1600");
        }
    });
</script>

Does this have to do with document ready or do I need a other approice?

I really want to do this with js because with css I get problems with my full screen background slider script which doesn't fill fullscreen anymore then..

This question has been answered by fourroses666. See the first response.

Evolution user, I like the back-end speed and simplicity

1,613 Posts

fourroses666 Reply #2, 11 years, 10 months ago

Oke, so it seems it grabs screen width of landscape. Doesn't change when going to portrait.

So is it possible to grab browser width instead of screen?

something like:
if (window.width > 1000) {

Evolution user, I like the back-end speed and simplicity

1,572 Posts

Paulp Reply #3, 11 years, 10 months ago

Is http://designedbythomas.co.uk/blog/how-detect-width-web-browser-using-jquery any use to you

1,613 Posts

fourroses666 Reply #4, 11 years, 10 months ago

yes looks like its usefull,thanks.

maybe I can figure out how to do it this way

(i'm no coder)

Evolution user, I like the back-end speed and simplicity

1,613 Posts

fourroses666 Reply #5, 11 years, 10 months ago

This seemed to work ':->

<style>
@media screen and (min-width:1000px) {
    @-ms-viewport{
        width:1600px;
    }
}
@media screen and (max-width:1000px) {
    @-ms-viewport{
        width:1000px;
    }
}
</style>

[ed. note: fourroses666 last edited this post 11 years, 10 months ago.]

Evolution user, I like the back-end speed and simplicity

discuss.answer

1,613 Posts

fourroses666 Reply #6, 11 years, 10 months ago

It doesn't work lol, didn't look good I guess..

The background image slider was not fullscreen and its now fixed by:

    @media only screen and (orientation: landscape) {
        html{width: 1600px;}
    	#maximage, #maximage .mc-image{width:100%!important; height:100%!important;}
    }

[ed. note: fourroses666 last edited this post 11 years, 10 months ago.]

Evolution user, I like the back-end speed and simplicity

Answered Viewport script don't work on tablet/ipad