[Iphone] full screen webpage

zaterdag 3 maart 2012 10:01

Acties:

0 Henk 'm!

Topicstarter

Om m'n domotica aan te sturen heb ik een webpagina gemaakt waarmee ik alles kan sturen (deze webpagina stuurt op z'n beurt commando's naar een Atmega bordje).

De webpagina is gemaakt op de resolutie (breedte en minimum hoogte) van het Iphone scherm en ik zou het natuurlijk graag full screen willen (zonder de safari adress bar en button bar).

na wat zoekwerk op google zag ik dat dit (deels) mogelijk is door de webpagina te saven naar het homescreen en in de html code volgende bij te zetten:

code:

1	<meta name="apple-mobile-web-app-capable" content="yes" />

Dit werkt perfect voor de pagina die op het homescreen staat... maar bij het klikken op een link start safari terug op en zit je weer met die adress en button bar...

weet er iemand een mogelijkheid om ook de gelinkte pagina's full screen te houden? Het zetten van bovenstaande code in elk van die pagina's werkt niet....
(enige mogelijkheid die ik tegenkwam was met ajax de extra info op te vragen en bij te voegen op de site, maar daarvoor moet ik de volledige site herschrijven + weet niet of dit zal lukken door php en javascript)

zaterdag 3 maart 2012 10:56

Acties:

0 Henk 'm!

Woy

Moderator Devschuur®

Een lelijke hack die ik me kan bedenken is om de hoofdpagina gewoon te laten bestaan uit een schermvullend (i)Frame, en daar je start pagina in te laden.

Verder zou ik geen idee hebben hoe dat verder op een iDinges werkt, en kan je dus ook niet verder helpen. Heb je al gezocht of er niet andere mensen zijn die hetzelfde willen? Dat lijkt me namelijk wel.

“Build a man a fire, and he'll be warm for a day. Set a man on fire, and he'll be warm for the rest of his life.”

zaterdag 3 maart 2012 11:00

Acties:

0 Henk 'm!

ZpAz

Apple

Woy schreef op zaterdag 03 maart 2012 @ 10:56:
Een lelijke hack die ik me kan bedenken is om de hoofdpagina gewoon te laten bestaan uit een schermvullend (i)Frame, en daar je start pagina in te laden.

Verder zou ik geen idee hebben hoe dat verder op een iDinges werkt, en kan je dus ook niet verder helpen. Heb je al gezocht of er niet andere mensen zijn die hetzelfde willen? Dat lijkt me namelijk wel.

Dat werkt denk ik niet.

De oplossing is die ik heb gebruikt is een stukje JS. Heb het ook gebruikt voor mijn eigen website. (Krijg zelf om één of andere reden het icoontje maar niet goed voor op de home-screen.)

Het idee is alle 'a' clicks afvangen en direct de document.location.href aanpassen. Ikzelf heb dit alleen gedaan voor links welke niet een target _blank hebben, zodat hij bij externe websites wel gewoon naar de Safari browser gaat.

Anyways als je jQuery hebt kan je de volgende code gebruiken.

JavaScript:

$(document).ready(function()
{
    //Make the links work correctly in app mode
    $('a').click(function()
    {
        if($(this).attr('target') != '_blank')
        {
            document.location=$(this).attr('href');
            return false;
        }
    });
});

Tweakers Time Machine Browser Extension | Chrome : Firefox

zaterdag 3 maart 2012 11:59

Acties:

0 Henk 'm!

kwaakvaak_v2

De adres balk wegduwen voor mobile safari is ook niet echt lastig

code:

<head>
  <meta charset=utf-8 />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Cross-device Address Bar Hide - Example 1</title>
  <style>
    body { min-height: 480px; }
  </style>
</head>
<body>
  <p>The script on this page should hide the address bar on iOS and Android.</p>
<script>
window.addEventListener("load",function() {
  setTimeout(function(){
    window.scrollTo(0, 0);
  }, 0);
});
</script>

Maar die button bar is een ander verhaal. En al de app eenmaal op startscreen staat werkt de oplossing van ZpAz ook wel netjes.

en voor het icon werkt meestal

code:

1 2	<link rel="apple-touch-icon-precomposed" href="img/icon.png"/> <link rel="apple-touch-icon" href="img/icon.png"/>

splash screen

code:

1	<link rel="apple-touch-startup-image" href="img/splash.png" />

Driving a cadillac in a fool's parade.

zaterdag 3 maart 2012 13:54

Acties:

0 Henk 'm!

Promy

Topicstarter

@ZpAz : dit werkt inderdaad perfect! En blijkbaar moet je het niet op de gelinkte pagina herhalen (ik ga maar 1 nivo diep: index en een gelinkte pagina)

@kwaakvaak_v2: die dingen voor het Icon en splashscreen zijn ook tof!

zaterdag 3 maart 2012 15:01

Acties:

0 Henk 'm!

MueR

Admin Tweakers Discord

is niet lief

Programming >> Webdesign, Markup & Clientside Scripting

Anyone who gets in between me and my morning coffee should be insecure.

Onderwerpen