640 x 920 screen size not showing full screen on iphone? (With pictures)

chrisjmears · March 2014

Hi, So Im using priocessing.js to develop an HTML5 based web app. I'm not at all experience with css and html5 so I am running into some curious problems

My processing sketch is set to:

size(640,920, "processing.core.PGraphicsRetina2D");

and my HTML contains &

So I would expect it to draw the canvas as 640 x 920 (i.e the full width of the iphone 4 edge to edge, however what I get is this?

Im rather confused as to where I am going wrong.

Heres my full html

<!DOCTYPE>
<html manifest="cache.appcache">

<!We may need to add AddType text/cache-manifest .appcache to apache server config or .htaccess—>
<head>
    <meta charset="UTF-8">
    <meta name="apple-mobile-web-app-title" content="Solar Remote"/>
    <meta name="viewport" width="device-width"; initial-scale=1.0 maximum-scale=1.0 user-scalable=0”>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />

    <title>My Solar Monitor</title>
    <link rel="icon" type="image/png" href="favicon.png"/>
    <link rel="apple-touch-startup-image" href="startup.png"/>
    <link rel="apple-touch-icon-precomposed" href="apple-touch-icon.png"/> 
    <style type="text/css">
    body
    {
        margin: 0;
    }
    </style>

</head>

<body>
    <canvas id="SerialMonitorv101g" data-processing-sources="Serial_Monitor_v1_01g.pde" width=640 height=920></canvas>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="processing-1.4.1.min.js" type="text/javascript"></script>
    <script src="processing.video.js" type="text/javascript"></script>

    <script>;

    function getLastData()
    {           
        $.getJSON('https://api.thingspeak.com/channels/5384/feed/last.json?&status=true&callback=?', function(data) {

        var created_at = data.created_at;
        var entry_id = data.entry_id;
        var field1 = data.field1;
        var field2 = data.field2;
        var field3 = data.field3;
        var field4 = data.field4;
        var field5 = data.field5;
        var field6 = data.field6;
        var field7 = data.field7;
        var field8 = data.field8;
        var status = data.status;   

            var pjs = Processing.getInstanceById('SerialMonitorv101g'); 
        pjs.ParseJSON(created_at, entry_id, field1, field2, field3, field4, field5, field6, field7, field8, status);
        }); 
    }

    getLastData();
    setInterval('getLastData()', 6000);

    </script>
</body>
</html>

Howdy, Stranger!

Categories

640 x 920 screen size not showing full screen on iphone? (With pictures)