webView and device rotation

by **rouillip** » Sun May 01, 2011 10:14 am

I want to display full screen a webView and get it full screen on device rotation, so i write this code :

<html>
<head>
<meta name = "viewport" content = "initial-scale = 1.0, user-scalable = yes" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="NKit.js"></script>
</head>
<body>
<script type="text/javascript">

var widtha =320;
function NKIsPageSupportsAutoOrientation()
{
return "yes";
}

function pageWillRotate(degree) {
if(degree== -90 || degree== 90) {
widtha= 480;
webView1.hide();
webView2.init(0,0,widtha,300);
webView2.loadURL("http://nimblekit.com/");
webView2.setScalesToFit("yes");
webView2.show();
}
else
{
widtha= 320;
webView2.hide();
webView1.init(0,0,widtha,440);
webView1.loadURL("http://nimblekit.com/");
webView1.setScalesToFit("yes");
webView1.show();
}
}

var webView1 = new NKWebView;
webView1.init(0,0,widtha,440);
webView1.loadURL("http://nimblekit.com/");
webView1.setScalesToFit("yes");
webView1.show();

var webView2 = new NKWebView;

</script>

</body>
</html>

May be it could help some of us

by **alchemy** » Sun May 01, 2011 11:22 am

Yes thats nice.

If you init both webviews in the head and preload them, you could just show and hide them to avoid lag, in your functions i think.

by **rue** » Wed Aug 10, 2011 1:11 am

This is great, but it's got a couple of bugs.
1. It keeps (2) sets of webpages. The url for the portrait can be different from the url for the landscape.
2. When you switch orientation, it doesn't remember the last page you were viewing and you go back to the original loadURL again.... losing your place.

I did some changes to the code:
Now, only (1) set of URL is kept and you don't lose/reset the page you're viewing even if you changed orientation. Note, only needed (1) webview for this version.

Code: Select all

           
            function pageWillRotate(degree) {
                if(degree== -90 || degree== 90) {
                    webView.init(0,0,440,320);
                }
                else
                {
                    webView.init(0,0,320,440);
                }
            }
            

            var webView = new NKWebView();
            webView.init(0,0,320,440);
            webView.loadURL("http://cnn.com/");
            webView.setScalesToFit("yes");
            webView.show();

            </script>

But even this one still has a bug though. If you switch to landscape before you enter the webview, your initial orientation is for a "portrait". -- anybody have any tips to fix this? i.e. is there a way to know the "current" device orientation? that way, the first init can have the correct width/height values.

by **cactuscraig** » Wed Aug 10, 2011 4:34 am

There seem to be some bugs in 1.9.7 that are in bugtracker... Hopefully will be fixed soon.

by **HughJohnson** » Wed Aug 10, 2011 4:55 am

Something like this seems to work:

Code: Select all

            function NKIsPageSupportsAutoOrientation() {
                return "yes";
            }
            function pageDidRotate(degree) {
              webView.init(0,0,window.innerWidth,window.innerHeight);
            }
            var webView = new NKWebView();
            webView.init(0,0,window.innerWidth,window.innerHeight);
            webView.loadURL("http://cnn.com/");
            webView.setScalesToFit("yes");
            webView.show();

by **rue** » Wed Aug 10, 2011 5:40 am

This function works fine.

Code: Select all

function pageDidRotate(degree) {
              webView.init(0,0,window.innerWidth,window.innerHeight);
            }

but...

Code: Select all

var webView = new NKWebView();
webView.init(0,0,window.innerWidth,window.innerHeight);
webView.loadURL("http://cnn.com/");
webView.setScalesToFit("yes");
webView.show();

windows.innerWidth here still returns 320 even if simulator is in landscape.

... the innerWidth doesn't seem to get updated until after the 1st pageDidRotate() function execution.

by **HughJohnson** » Wed Aug 10, 2011 6:56 am

rue wrote:... the innerWidth doesn't seem to get updated until after the 1st pageDidRotate() function execution.

Yeah I had the same problem but it fires the page did rotate function when the app starts in landscape, so it fixes it correctly. Is this not the case for you? I only tried on iPad2 so could be different for you.

by **Dilemma Apps** » Wed Aug 10, 2011 2:36 pm

I just create my main webview, and have the following to handle my orientation

Code: Select all

<link rel="stylesheet" media="all and (orientation:portrait)" href="styles_portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="styles_landscape.css">
<link rel="stylesheet" media="all" href="styles_common.css">

Modify all dimensions of elements etc in the css, works perfectly and seemlessly.

by **HughJohnson** » Wed Aug 10, 2011 5:10 pm

Dilemma Apps wrote:I just create my main webview, and have the following to handle my orientation
Code: Select all
<link rel="stylesheet" media="all and (orientation:portrait)" href="styles_portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="styles_landscape.css"> <link rel="stylesheet" media="all" href="styles_common.css">
Modify all dimensions of elements etc in the css, works perfectly and seemlessly.

I don't understand how your CSS would change a native element's size. Can you show an example using CNN.com like the above examples? How are you targeting the webview in your CSS to assign styles to it?

by **Dilemma Apps** » Thu Aug 11, 2011 7:07 pm

Sorry it doesn't do anything for native controls.

webView and device rotation

webView and device rotation

Re: webView and device rotation

Re: webView and device rotation

Re: webView and device rotation

Re: webView and device rotation

Re: webView and device rotation

Re: webView and device rotation

Re: webView and device rotation

Re: webView and device rotation

Re: webView and device rotation

Who is online