Home/ Questions/Q 8314155
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T20:43:45+00:00

I’m currently struggling with viewport setups with the iphone (3/4/4s) when I return information

  • 0

I’m currently struggling with viewport setups with the iphone (3/4/4s) when I return information from a form that inserts a div element that must be wider than the initial view point setting.

I’ve included a very basic demo below to simplify exactly what is going on, but it only makes sense when viewed with an iphone (looks fine on a normal computer browser because of the extra width of your screen.

Or in simple terms:

1) My viewport is setup as this:<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1">

This gives on a iphone 4s an initial width of 320pixels when the webpage is viewed.

2) When I submit a form on the page using jquery (ajax request), the ajax request returns some html code that contains a div that MUST be 500 pixels wide. This gets inserted into the current webpage.

3) Now the viewport is too small to see the entire width of this inserted div element.

4) How do I dynamically reset either the viewport, or zoom out to ensure I can see this new div without the user having to do anything manually?

5) (This div gets inserted at the top of the page leaving the form underneath it. Is it possible to reposition the user back to the top of the page? I think window.scrollTo(0, 0); works but I’m not sure.)

Here’s a very simple demo, but you must view this on an iphone.

<!DOCTYPE html>
<html>
    <head>
        <title>Demo</title>
        <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1">
        <style>
            #clickbox { background:yellow; display: block;}
            .box { background: red; width: 500px; height:200px; border: 2px solid; margin: 5px}
        </style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <div id="clickbox"><button id="button">Click me!</button></div>
        <script>     
            $("#button").click(function (){
                $("#clickbox").before( "<div class='box'>Oh look at me! I'm too wide, how can I reset the view point to view my complete width!?</div>" );
            });
        </script>
    </body>
</html>

If you find it easier, this code is already online here:

What I have tried:

  1. Multiple variations of the meta viewport tag. Literally about 20 different combinations of initial/min/max scale.
  2. jquery minupulation of the content div like this: $('a').bind('click',function(event){
    $("#viewport").prop("content","width=550, maximum-scale = 1")
    });
  3. Various other crazy ideas. None work properly at all.

Any suggestions or pointers very much appreciated. Thank you.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think you should be trying to use .attr instead of .prop

    This works for example, but you will have to play with the settings of the other elements:

    <!DOCTYPE html>
<html>
    <head>
        <title>Demo</title>
        <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1">
        <style>
            #clickbox { background:yellow; display: block;}
            .box { background: red; width: 640px; height:200px; border: 2px solid; margin: 5px}
        </style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <div id="clickbox"><button id="button">Click me!</button></div>
        <script>     
            $("#button").click(function (){
                $('#viewport').attr('content', 'width=device-width, initial-scale=0.5');
                $("#clickbox").before( "<div class='box'>Oh look at me! I'm too wide, how can I reset the view point to view my complete width!?</div>" );
            });
        </script>
    </body>
</html>

    See the new line added before $('#clickbox')...:

    $('#viewport').attr('content', 'width=device-width, initial-scale=0.5');

    I hope this helps you along the right path.

    • 0