webapp afstellen op verschillende telefoons/schermgroottes

[Anoniem: 500241]

Ik ben bezig met het maken van een webapp in een phonegab frame die moet ogen als een native app. Het probleem waar ik nu tegen aanloop is dat ik niet precies weet hoe ik de webapp moet afstellen op verschillende telefoons/ schermgroottes zodat er bijvoorbeeld geen dingen buiten het scherm vallen of zodat teksten en images het juiste formaat krijgen passend bij de schermgrootte van de telefoon.

Ik dacht dat ik de oplossing had gevonden maar het lijkt niet helemaal te werken. De onderstaande css code is een voorbeeld van hoe ik het heb aangepakt. Door middel van '@media screen and (max-device-height: ..px) and (orientation: portrait)' wil ik voor de meest populaire screensizes de grootte van images en de afstand tussen elementen aanpassen. Als ik mijn browser van mijn desktop nu vergroot of verklein werkt het prima. De afstanden tussen elementen en de grootte van images veranderen wanneer ik de browser vergroot of verklein. Maar de telefoons waar ik mee test (htc wildfire en samsung gt-i5800) lijken hier niet op te reageren. De Htc wildfire heeft een screen size van 240x320 maar reageert niet op de code die ik achter deze tag zet '@media screen and (max-device-height: 320px) and (orientation: portrait)'.

[edit: de htc wildfire reageert wel op '@media screen and (max-device-height: 480px) and (orientation: portrait)'. En de samsung gt-i5800 reageert wel op '@media screen and (max-device-height: 533px) and (orientation: portrait)'. Beide telefoons hebben dus een andere display-hoogte dan de 'max-device-height' in de media-tags waar de telefoons op reageren.]

Wie kan mij vertellen wat ik fout doe of weet een aanpak die wel werkt? Alvast bedankt!

code:

.Header {padding-top:20px} 
.buttons {padding-top:5px} 
.welcomeImg {padding-top:20px;padding-left:8px;width:250px;} 

@media screen and (max-device-height: 685px) and (orientation: portrait){ 
.Header {padding-top:35px} 
.buttons{padding-top:20px} 
.welcomeImg {padding-top:40px;width:260px;}} 

@media screen and (max-device-height: 533px) and (orientation: portrait){ 
.Header {padding-top:30px} 
.buttons {padding-top:15px} 
.welcomeImg {padding-top:35px;width:250px;}} 

@media screen and (max-device-height: 480px) and (orientation: portrait){ 
.Header {padding-top:17px} 
.buttons {padding-top:2px} 
.welcomeImg {padding-top:22px;width:250px;}} 

@media screen and (max-device-height: 400px) and (orientation: portrait){ 
.Header {padding-top:24px} 
.buttons {padding-top:0px} 
.welcomeImg {padding-top:25px;width:180px;} }  

@media screen and (max-device-height: 320px) and (orientation: portrait){ 
.Header {padding-top:17px} 
.buttons {padding-top:0px} 
.welcomeImg {padding-top:18px;width:130px;}}

[ Voor 30% gewijzigd door Anoniem: 500241 op 23-04-2013 17:16 ]

[steffex]

kijk eens naar twitter bootstrap. Dan met name het responsive gedeelte: http://twitter.github.io/...affolding.html#responsive

Veel makkelijker dan het zelf proberen te fixen

Heb niet goed gelezen, met phonegap is dit misschien niet de beste oplossing. Misschien even kijken of de browsers de gebruikte tags wel ondersteunen...

[ Voor 30% gewijzigd door steffex op 23-04-2013 15:47 ]

[Anoniem: 500241]

De tags worden wel ondersteund. Ontdek namelijk zojuist dat de Htc wildfire (met een display van 240x320) wel reageert op aanpassingen achter de tag @media screen and (max-device-height: 480px) and (orientation: portrait).

Aangezien de Htc wildfire een screen size heeft van 240x320 vind ik het raar dat hij niet reageert op de code achter de tag @media screen and (max-device-height: 320px) and (orientation: portrait) en wel op de tag @media screen and (max-device-height: 480px) and (orientation: portrait)

[Gusev]

Ik zie geen accolade sluiten op het eind klopt dat?

[Anoniem: 500241]

Goed opgemerkt! Ik zal mijn bericht even aanpassen deze eind-accolade heb ik namelijk in de werkelijke code wel.

[Gusev]

Ah oke, gooi m dan meteen ff tussen [code] blocks ;-)


edit: Wacht ff, je hebt het over de HTC Wildfire, welke Android versie en welke browser draait dat ding?

[ Voor 57% gewijzigd door Gusev op 23-04-2013 16:19 ]

[Anoniem: 500241]

Sorry Gusev weet niet precies wat je met je laatste bericht bedoelt

[Gusev]

Cascading Stylesheet:

.Header {padding-top:20px}
.buttons {padding-top:5px}
.welcomeImg {padding-top:20px;padding-left:8px;width:250px;}

@media screen and (max-device-height: 685px) and (orientation: portrait){
.Header {padding-top:35px}
.buttons{padding-top:20px}
.welcomeImg {padding-top:40px;width:260px;}}

@media screen and (max-device-height: 533px) and (orientation: portrait){
.Header {padding-top:30px}
.buttons {padding-top:15px}
.welcomeImg {padding-top:35px;width:250px;}}

@media screen and (max-device-height: 480px) and (orientation: portrait){
.Header {padding-top:17px}
.buttons {padding-top:2px}
.welcomeImg {padding-top:22px;width:250px;}}

@media screen and (max-device-height: 400px) and (orientation: portrait){
.Header {padding-top:24px}
.buttons {padding-top:0px}
.welcomeImg {padding-top:25px;width:180px;} } 

@media screen and (max-device-height: 320px) and (orientation: portrait){
.Header {padding-top:17px}
.buttons {padding-top:0px}
.welcomeImg {padding-top:18px;width:130px;}}

Ik lees in ieder geval dit:

Take the HTC Wildfire, which runs a custom webkit based browser. From a developers viewpoint this can cause a host of issues.

op deze link: http://www.soak.co.uk/blo...sistent-mobile-rendering/

[ Voor 11% gewijzigd door Gusev op 23-04-2013 16:24 ]

[Anoniem: 500241]

Dankje. Ok misschien ligt daar dus een probleem. Wat dat probleem alleen exact is vind ik moeilijk te achterhalen. De htc wildfire draait trouwens op android 2.2.1.

[Anoniem: 500241]

Toch vermoed ik dat mijn probleem niet specifiek met de Htc Wildfire te maken heeft aangezien de Samsung met een screensize van 240x400 ook niet reageerd op de tag '@media screen and (max-device-height: 400px) and (orientation: portrait)' maar wel op de tag '@media screen and (max-device-height: 533px) and (orientation: portrait)'.

Beide telefoons hebben een andere display-hoogte dan de 'max-device-height' in de media-tags waar de telefoons op reageren.

Ik zie blijkbaar iets over het hoofd.

[Gusev]

Zolang we niet weten welke browser je dit in test wordt het lastig. In ieder geval kan het zomaar dat de browser waar je het in test dit gewoon niet ondersteund:

http://www.browsersupport.net/CSS/@media_(max-device-height)

edit: als je met de htc naar deze link navigeert, zie je dan een groen of rood hokje?: http://www.browsersupport...a_%28max-device-height%29

[ Voor 28% gewijzigd door Gusev op 23-04-2013 17:12 ]

[Anoniem: 500241]

handige site. Ik zie een groen hokje, dus nu weet ik in iedergeval zeker dat hij de code ondersteund.

Dit vermoedde ik al omdat beide telefoons wel op de tag reageren alleen ligt de max-device-height in de tag dan wel hoger dan de werkelijke display-hoogte van de telefoon.

[Gusev]

Het kan zijn dat orientation: portrait dan niet ondersteund wordt...

[Anoniem: 500241]

Ja had gekunt, heb deze tag al eens weg gehaald met dezelfde uitkomst.

[R4gnax]

Zomaar een idee; al eens geprobeerd met 1px hoger dan de werkelijke max-device-height die je wilt testen? Kan zijn dat de 'custom webkit build' op deze telefoon een exclusive range ipv inclusive range gebruikt, of dat er ergens een afrondingsfout optreedt wegens een brakke manier van pixel ratios omzetten

En al eens getest gewoon met max-height ipv max-device-height?

[Anoniem: 500241]

Bedankt R4gnax, heb het geprobeert maar het haalt niks uit helaas.

Ik vond dit artikel op het internet: http://www.quirksmode.org...10/04/a_pixel_is_not.html

Waarin eigenlijk kort gezegt in staat dat de tag '@media screen and (max-device-height: ...)' niet te vertrouwen is aangezien de juiste device-height vaak niet wordt herkend.

Dat is dus mooi balen. Toch kan ik niet geloven dat het onmogelijk is mijn webapp responsive te maken voor verschillende telefoon screensizes. Dus wanneer je nog goede tips hebt laat het horen alsjeblieft!

[Peckham]

Je zegt dat max-device-height 320px niet werkt, maar max-device-height 480px wel. Heeft de Wildfire dan toevallig een device-pixel-ratio van 1.5?

Te testen op: http://bjango.com/articles/min-device-pixel-ratio/

Edit: lijkt ook overeen te komen met je andere topic

[ Voor 23% gewijzigd door Peckham op 24-04-2013 16:04 ]

[Anoniem: 500241]

Ok getest. uitkomst:
-webkit-min-device-pixel-ratio nothin’
-o-min-device-pixel-ratio nothin’
min-resolution (dpi) nothin’
min-resolution (dppx) nothin’

Op internet vind ik deze specificaties:
Size: 240 x 320 pixels, 3.2 inches (~125 ppi pixel density)

Verklaart dat nog iets?

[Peckham]

Het verklaart dat mijn verwachting niet klopte, ik zou namelijk een -webkit-min-device-pixel-ratio van 1.5 verwacht.
Je hebt wel de viewport meta tag in de head van je html staan?

[Anoniem: 500241]

deze meta tag heb ik er in staan:

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"/>

[Peckham]

Wat ik bij de meeste artikelen over media queries voor mobiele sites tegenkom is een meta tag als deze: <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

Een van deze artikelen heeft het ook specifiek over de HTC Wildfire: http://www.soak.co.uk/blo...sistent-mobile-rendering/

[Anoniem: 500241]

Bedankt. Helaas veranderd het niks aan mijn probleem. De Htc Willdfire gedraagt zich nog steeds alsof hij een device-height heeft van 480px terwijl hij een device-height van 320 heeft en hetzelfde geld voor de samsung gt-i5800 die zich gedraagt als een telefoon met device-heigt 533 terwijl het een device-height van 400 heeft.