We help IT Professionals succeed at work.

scaling viewport to fit whole webpage

darren-w-
darren-w- asked
on
Hi

I have a webpage that is designed to fit inside the screen of a ipad, but I would like to accommodate for the fact that some users will sometimes have tags open and in this case I would like to further reduce the viewports width in order to hold the whole page in the view.

Can this be done with JavaScript, and what would be the best approach?

Darren
Comment
Watch Question

CERTIFIED EXPERT

Commented:
Most common thing for achieving complete width of any resolution / machine, assign width for outer container in percentage. (like- width:100%)

It will automatically shrinks accordingly.

Hope this helps you.

Author

Commented:
Thanks,

not so sure if it would solve the problem if the available height was smaller than expected I would like to increase the vp width so that the full height was shown, attached sketch
Untitled.gif
CERTIFIED EXPERT

Commented:
Darren,

Do you want to have complete height or width? In your question you are asking about width.
Now you need to have complete height.

can you please share your code and what exactly you want?

Author

Commented:
I would ideally like to do this:

<meta name="viewport" content="height=[full height of content]" />

based on this:  <meta name="viewport" content="width=device-width" /> which will resize the page to fit the width

Yes, my original question is worded incorrectly:
this: further reduce the viewports width
should read: further increase the viewports width



Ok found solution,  I just need to manually set the width wider that my viewport size so presently the width is something like 1200px, so if I set it to 1300px it adds more space to the left and right and makes the bottom fit in.


ie:

<meta name="viewport" content="width=1300" />

Author

Commented:
found solution  myself

Explore More ContentExplore courses, solutions, and other research materials related to this topic.