WebView's and 100% width CSS too wide...

Question

WebView's and 100% width CSS too wide...

You must Login before you can answer or comment on any questions.

I am building an app using one webview in a project, in order to take full advantage of CSS3 and jQuery.

I create the webView and it takes up full width/height of the device. My problem arises in for example Android 2.2 where html elements (ie the body element) is styled to have 100% width. On a 480px wide emulator and also a device i tested on, the elements end up being roughly 900px wide... on my test device running 4.0.4 the CSS renders exactly the width of the device. What could be causing this?

Here is my code for app.js

// Create our main window
    var win = Ti.UI.createWindow({
        fullscreen: false,
        backgroundColor: '#191919',
        //width: Titanium.UI.FILL,
        //height: Titanium.UI.FILL,
        navBarHidden:true,
        exitOnClose:true
    });
 
    // Create a fullscreen WebView
    var webView = Ti.UI.createWebView({
        enableZoomControls: false, 
        url : '/www/index.html',
        visible: true,
        //width: Ti.Platform.displayCaps.platformWidth - 40,
        //height: Ti.Platform.displayCaps.platformHeight - 80,
        backgroundColor: '#191919',
        showScrollbars: false
    });
 
    // Fire event to webview where jQuery sets width of element to == device Width
    webView.addEventListener('load', function(e) {
        var winWidth = Ti.Platform.displayCaps.platformWidth;
        Ti.App.fireEvent('app:setDeviceWidth', { winWidth: winWidth });
    });
 
    // Initialise app
    win.add(webView);
    win.orientationModes=[Titanium.UI.PORTRAIT];
    win.open();

index.html file:

<!DOCTYPE HTML>
<html>
    <head>
        <title>Dominos Rosters</title>
 
        <link rel="stylesheet" href="styles.css">
 
        <script src="jquery-1.7.2.min.js"></script>
        <script src="script.js"></script>
 
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    </head>
 
    <body>
        <div id="test"></div>
    </body>
</html>

and my jquery script.js:

$(document).ready(function(){
    Ti.App.addEventListener('app:setDeviceWidth', function(e){
        var winWidth = e.winWidth;
        $('#test').css({
            width: winWidth,
            height: '50'
        });
    });
});

1 Answer

Your Answer

Think you can help? Login to answer this question!

Answer 1

Try adding this to the head of the HTML

<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

You can also 'lock down' the Android screen resolution with this in your tiapp.xml - this will make full width to be 320px, as with the iPhone.

<android xmlns:android="http://schemas.android.com/apk/res/android">
        <manifest>
            <supports-screens android:anyDensity="false"/>
        </manifest>
    </android>

hth