meta viewport, device-width verkrijgen zonder te zetten

[HaTe]

Het probleem is dat ik de breedte nodig heb van hoe de mobiele browser de webpagina schaalt. Ik heb hier een Full HD smartphone, en de meeste browsers schalen de webpagina naar 360px breedte als ik deze tag gebruik in de head:

HTML:

<meta name="viewport" content="width=device-width, initial-scale=1" />

Nu wil ik dus die 360px krijgen, zonder dat ik dit in de head heb. Ik kom er niet uit, lijkt mij niet mogelijk. Alle functies die hier staan geven niet de device-width neer; http://responsejs.com/labs/dimensions/

Een andere oplossing zou zijn, om wel de viewport in de head te zetten, dan de device-width verkrijgen en aan de hand daarvan met javascript een nieuwe meta viewport tag plaatsen of de nu toch al bestaande meta viewport tag wijzigen. Probleem is dat als de meta viewport tag eenmaal geladen is en de browser de website geschaald heeft, ik hem daarna niet meer kan aanpassen.

Iemand die hier raad mee weet?

Wat ik eigenlijk wil is mijn pagina die 480px breed is, deze tag mee te geven als de device-width kleiner is dan 480px:

HTML:

<meta name="viewport" content="width=480px">

En als dit niet het geval is, moet de andere viewport tag blijven staan (of die moet gemaakt worden).

Enkel in Opera Mobile werkt het wel op deze manier, dus de eerste viewport tag in de head, en daarna dit script uitvoeren:

JavaScript:

if($(window).width() < 480) {
    $('#metaViewport').remove();
    //$('#metaViewport').attr('content', 'width=480px');
    $('head').append('<meta name="viewport" content="width=480px">');
}

Bij de andere browsers lijkt het niet mogelijk om de viewport te wijzigen nadat deze is gezet.

[ Voor 15% gewijzigd door HaTe op 08-05-2013 20:31 ]

[Currahee]

Ik snap niet helemaal wat je nu precies wilt, maar waarschijnlijk werkt je javascript code niet omdat je probeert de viewport aan te passen op een id (#) terwijl in de meta geen id gedefineerd is. Volgens mij moet de volgende code werken:

JavaScript:

if($(window).width() < 480) {    
    $('meta[name=viewport]').attr('content', 'width=480px');   
}

[HaTe]

Oh nee er zit wel een ID in, ik heb heto ok op die manier geprobeerd, maar pakt hij ook niet. Als de viewport eenmaal is gezet, dan kan ik hem niet meer aanpassen (althans, wel aanpassen, maar de browsers pakken het niet meer).

Ik heb dus een pagina die MINIMAAL 480px breed is. Ook als je telefoon een scherm heeft van 480px breed, dan wordt dit door de standaard zoom bijgewerkt naar 360px in alle browsers. Dit zorgt ervoor dat mijn website dus niet meer past (te groot en na elk pagina bezoek moet je uitzoomen). Door de viewport te forceren naar 480px past de website altijd in de browser.

Heeft een telefoon/tablet een resolutie van meer dan 480px (inclusief zoom), dan moet de website dus wel meerekken (dus dan moet hij device-width gebruiken), want als ik dan nog 480px forceer, is alles veel te groot.

[ Voor 3% gewijzigd door HaTe op 08-05-2013 21:56 ]

[HaTe]

Iemand nog een idee?

[R4gnax]

HaTe schreef op zaterdag 11 mei 2013 @ 16:15:
Iemand nog een idee?

Zullen we eens beginnen bij het begin: waarom wil je de viewport breedte misbruiken om je website te schalen?

Je kunt toch ook gewoon schaling bewerkstelligen via een @media (min-width: __ px) regel die font groottes aanpast, kolom breedte in je layout grid aanpast, en als je die hebt evt. een aantal fixed size elementen aanpast zodat ze op lagere breedtes nog goed passen.

[Deef_K]

Met R4gnax,

Zoek eens op media queries.

[HaTe]

Ja, ik weet dat ik daarmee de css afhankelijk van de resolutie kan aanpassen, maar het resultaat is dan toch niet helemaal gewenst. De website is eigenlijk als een soort app en moet eigenlijk voor alle smartphones dus die 480px breedte hebben, dan is alles gewoon goed geschaald. Voor tablets mag hij de eigen resolutie aanhouden en voor al het andere ook.

[_Thanatos_]

Dan moet je zorgen dat de webapp fluid/elastic genoeg is dat ie gewoon met elke breedte overweg kan. Wat nou als iemand een kleiner scherm heeft, of juist een groter scherm? Dan krijg je dus een flut-experience omdat alles te klein of te groot is.

Als je per se die 360px wil bereiken, zorg dan eerst dat alles netjes schaalbaar is, dus alles wat een discrete afmeting heeft, in ems definiëren. Vervolgens als de gebruiker 480px heeft, de font-size van de body op 1,25em zetten, en alles schaalt vrolijk mee. Precies hetzelfde effect.

Bottom line is dat media queries en een goed schaalbaar design hiervoor de oplossing zijn. Je weet nou eenmaal niet op wat voor device je webapp bekeken wordt.