Javascript to automatically zoom in with a browser on load

Question

I have created a java application which is 500x400 px my iPhones width is much greater then 400px, after the site loads I need to manually zoom into the application. Is there a javascript to automatically zoom the window so that the width of my screen being displayed is 400px, secondly is there a way to disable scrolling :) Thank you so much!

So basically script to zoom in automatically on certain resolution right? — Vaibhav Magon, Jun 07 '14 at 11:11
no need for js. set width to 100% and set overflow to hidden in css — Winchestro, Jun 07 '14 at 11:15
No, but wouldn't that create the canvas application to become un-proportional? Or make the canvas bigger then I want?? @Winchestro — reidjako, Jun 07 '14 at 11:17
@reidjako there are **few** cases where you need js, you'd be amazed how much you can accomplish with pure css, despite the "language" itself being horrible :) — Winchestro, Jun 07 '14 at 11:35

score 2 · Answer 1 · answered Jun 07 '14 at 11:18

2

Check out CSS3 Media Queries. They allow you to include stylesheets depending on the browser's viewport's size. And to disable scrolling u could set the scroll to hidden.

Code to disable scroll.

$('html, body').css({
    'overflow': 'hidden',
    'height': '100%'
})

Also by using js u could detect what platform u r rendering your application and then use zoom to zoom in accordingly.

Example for mozilla:

if ($.browser.mozilla){
            var step = 0.02;
            currFFZoom += step; 
            $('body').css('MozTransform','scale(' + currFFZoom + ')');
        } else {
            var step = 2;
            currIEZoom += step;
            $('body').css('zoom', ' ' + currIEZoom + '%');
        }

answered Jun 07 '14 at 11:18

Vaibhav Magon

1,453
1
13
29

How would I do this for mobile safari? So for iPhone :) @Vaibhav – reidjako Jun 07 '14 at 11:20
http://stackoverflow.com/questions/11381673/javascript-solution-to-detect-mobile-browser try seeing this. Hope it helps. :) – Vaibhav Magon Jun 07 '14 at 11:22
Its not a matter of detecting, its a matter of scaling, this application is on the mobile site all ready. The issue is, is that my iPhone 5s's width is about 600, more I think. But I want it to zoom into 400px width. It will only be used on my phone with safari. Thank you :) – reidjako Jun 07 '14 at 11:27
i prefer feature detection over platform detection but nice answer. +1 – Winchestro Jun 07 '14 at 11:37

score -1 · Accepted Answer · answered Jun 07 '14 at 11:44

-1

<meta name="viewport" content="width=device-100px, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;">

Using a meta tag got it to work

answered Jun 07 '14 at 11:44

reidjako

384
3
4
17

Javascript to automatically zoom in with a browser on load

2 Answers2