media queries voor iphone en dan ook echt aléén iphone - Softwareontwikkeling

zaterdag 4 mei 2013 14:11

Acties:

Verwijderd

Topicstarter

Ik ben bezig met de ontwikkeling van een web app in phonegab en zit met het probleem dat Iphone mijn css net iets anders interpreteert dan Android. Ik heb bijvoorbeeld een tekst input field (waarvan de code hieronder) die er op een Iphone veel smaller uit ziet dan op een Android telefoon.

Door middel van media queries hoop ik sommige codes speciaal voor Ihpone wat te kunnen customizen zodat het er ook op Iphone goed uit ziet. Ik het internet een beetje afzocht en misschien geschikte media queries gevonden (code hieronder). Wat belangrijk is voor mij is dat deze media queries enkel en alleen Iphones moeten aanspreken. Dit doen de codes die ik gevonden heb naar mijn idee niet allemaal. Wie kan mij vertellen of deze media queries geschikt zijn en/of mogelijke alternatieven?

alvast bedankt voor welke hulp dan ook.

code:

1	input[type="text"] {width:200px;height:29px;padding:10px;margin-bottom:10px;background:#fff;border:1px solid rgba(0,0,0,.2);border-radius:10px;-webkit-appearance:none;box-sizing:border-box;}

optie 1:

code:

<!-- iPhone 2G, 3G, 3GS Portrait -->
@media only screen and (device-width: 320px) and (orientation: portrait) and not (-webkit-min-device-pixel-ratio: 2) {
    /* CSS3 Rules for iPhone in Portrait Orientation */
}

<!-- iPhone 2G, 3G, 3GS Landscape -->
@media only screen and (device-width: 480px) and (orientation: landscape) and not (-webkit-min-device-pixel-ratio: 2) {
    /* CSS3 Rules for iPhone in Landscape Orientation */
}

<!-- iPhone 4, 4S Portrait -->
@media only screen and (device-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    /* CSS3 Rules for XX iPhone in Portrait Orientation */
}

<!-- iPhone 4, 4S Landscape -->
@media only screen and (device-width: 960px) and (orientation: landscape) and not (-webkit-min-device-pixel-ratio: 2) {
    /* CSS3 Rules for iPhone in Landscape Orientation */
}

optie 2:

code:

<!-- iPhone Landscape -->
@media screen and (max-device-width: 480px) { 
}

<!-- iPhone Portrait -->
@media screen and (max-device-width: 320px) { 
}

<!-- iPhone 3G -->
@media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1){
}

<!-- iPhone 4 -->
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { 
}

<!-- iPhone 5 -->
@media screen and (device-aspect-ratio: 40/71) {
}
or
@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){
}

zaterdag 4 mei 2013 17:38

Acties:

pieturp

gaffa!

Persoonlijk zou ik met JS even sniffen welk OS je hebt en een class op de body of html tag zetten. Net zo makkelijk imho

... en etcetera en zo

zondag 5 mei 2013 02:58

Acties:

_Thanatos_

Ja, en kaal

Dit wordt natuurlijk een hel om te ondersteunen.

Ik denk dat het verschil in breedte voortvloeit uit de net verschillende paddings/borders op textboxen over verschillende OS'en/browsers.

Heb je al gekeken naar box-sizing? Dat zou een oplossing kunnen zijn...

(btw, de breedte in pixels is eng - je weet niet 100% zeker van tevoren wat de breedte van het scherm is. gebruiker liever percentages)

[ Voor 27% gewijzigd door _Thanatos_ op 05-05-2013 03:01 ]

日本！🎌

maandag 6 mei 2013 11:43

Acties:

Bosmonster

*zucht*

Media queries zijn geen browser-sniffers...

Je kunt beter achterhalen waarom er een verschil zit en dit proberen op te lossen. Er is geen reden voor die boxen om verschillend te zijn.

maandag 6 mei 2013 13:35

Acties:

MrBrown

Reservoir Dog

Misschien een goede reset css gebruiken om eea naar een generieke default te krijgen, voordat je je eigen stylesheets eroverheen gooit? OS/Browserspecifiek zou ik niet aan beginnen.... Sterker nog, ik ben blij dat ik daar eindelijk vanaf ben.

Powered by Manetti (compiled by Jura)

maandag 6 mei 2013 20:52

Acties:

R4gnax

Verwijderd schreef op zaterdag 04 mei 2013 @ 14:11:
Ik ben bezig met de ontwikkeling van een web app in phonegab en zit met het probleem dat Iphone mijn css net iets anders interpreteert dan Android. Ik heb bijvoorbeeld een tekst input field (waarvan de code hieronder) die er op een Iphone veel smaller uit ziet dan op een Android telefoon.

http://caniuse.com/css3-boxsizing

Android heeft pas vanaf v4 ondersteuning voor unprefixed box-sizing. Probeer eens -webkit-box-sizing er bij te zetten?

Als je met mobile bezig bent is het heel handig om een site als 'Can I use' of 'Quirksmode' er bij te houden en daar de compatibility tables te raadplegen: webkit != webkit, zoals wel eens geschreven wordt ...

[ Voor 16% gewijzigd door R4gnax op 06-05-2013 20:53 ]

woensdag 8 mei 2013 14:44

Acties:

_Thanatos_

Ja, en kaal

R4gnax schreef op maandag 06 mei 2013 @ 20:52:
[...]

http://caniuse.com/css3-boxsizing

Android heeft pas vanaf v4 ondersteuning voor unprefixed box-sizing. Probeer eens -webkit-box-sizing er bij te zetten?

Als je met mobile bezig bent is het heel handig om een site als 'Can I use' of 'Quirksmode' er bij te houden en daar de compatibility tables te raadplegen: webkit != webkit, zoals wel eens geschreven wordt ...

Webkit is soms aangehaald als de nieuwe IE6 zelfs

Wat betreft die prefixing: voor box-sizing gewoon altijd -moz-, -webkit- en geen prefix gebruiken. In die volgorde ook. Firefox is nml ook een mobiele browser, en de andere mobiele browsers (IE9-mob, Opera-mob) hebben geen prefix nodig.

日本！🎌

woensdag 8 mei 2013 15:32

Acties:

Bosmonster

*zucht*

_Thanatos_ schreef op woensdag 08 mei 2013 @ 14:44:
[...]

Webkit is soms aangehaald als de nieuwe IE6 zelfs

Dat is wel heel generaliserend

Android? Ja, met het gebrek aan updates voor veel telefoons en het bijbehorende grote marktaandeel aan oude Androidversies (met oude webkits) wordt het er wat dat betreft niet veel beter op nee.

Chrome? Ook enigszins ja. Die heeft zoveel rare quirks die maar niet opgelost worden (en ook nog eens verschillen tussen de Mac en Windows-versies) dat je daar af en toe ook je hoofd goed over kunt breken.

Misschien maar goed dat Google z'n eigen fork gaat beginnen, dan wordt niet webkit als schuldige aangewezen

[ Voor 8% gewijzigd door Bosmonster op 08-05-2013 15:32 ]

woensdag 8 mei 2013 16:48

Acties:

OkkE

CSS influencer :+

_Thanatos_ schreef op woensdag 08 mei 2013 @ 14:44:
Webkit is soms aangehaald als de nieuwe IE6 zelfs

Die opmerking ging alleen over het feit dat veel websites alleen de -webkit- prefix gebruikte...

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

woensdag 8 mei 2013 18:38

Acties:

_Thanatos_

Ja, en kaal

OkkE schreef op woensdag 08 mei 2013 @ 16:48:
[...]

Die opmerking ging alleen over het feit dat veel websites alleen de -webkit- prefix gebruikte...

Niet alleen dat, maar dat komt er wel bij ja.
Er wordt ook gezegd "webkit is geen webkit is geen webkit" of iets van die strekking. Wat dus slaat op het feit dat webkit is 40 miljard verschillende browser gebruikt wordt, waar iedere browser z'n eigen opvattingen heeft over hoe webkit z'n werk moet doen. We gaan dat zometeen ook zien als Opera op webkit/blink draait. En als Chrome zometeen op blink draait. Dat is ook "gewoon" webkit (zeggen ze zelf) dus daarvoor geldt hetzelfde.

Maargoed, voor de TS, dat benadrukt alleen maar dat media queries niet bedoeld zijn als workaround voor browser sniffing. Want media queries daarvoor misbruiken is geen haar beter. Zo kun je ook feature detection gebruiken om browsersniffing te doen dat er niet uitziet als browsersniffing, en ook dat is net zo erg.

[ Voor 27% gewijzigd door _Thanatos_ op 08-05-2013 18:40 ]

日本！🎌