[html/css]Website niet uit te zoomen op Safari/Iphone

[!null]

Webdesign is nou niet echt mijn vaste baan al heb ik het in het verleden wel gedaan, dus laat ik beginnen met te zeggen dat mijn HTML/CSS kennis misschien niet erg actueel is. Ik heb een site die opzich prima is (hij is dan ook redelijk simpel) maar ik merk bij vrienden dat hij slecht te bekijken is op de Iphone met de standaard aanwezige Safari browser als ik het goed heb. Nu heb ik zelf geen Iphone dus is het ook lastig testen. Nu heb ik ook nog eens tot zondag de tijd om het op te lossen haha.

Het probleem is dat men niet uit kan zoomen op de Iphone (en vermoedelijk andere telefoons). De website wordt op zich net als op de desktop goed weergegeven, verhoudingen kloppen etc. Alleen hij staat standaard ingezoomd. Daar valt wel wat voor te verzinnen heb ik her en der gelezen, maar die trucs werken niet. Vermoedelijk omdat er een onderliggend probleem is, dat men niet kan uitzoomen op de website.

Ik heb er uiteraard wel wat op gezocht, maar ik kon nou niet iets nuttigs vinden waarmee ik dit probleem kon oplossen. Ook vrij waardeloos dat ik iedere keer vriend+Iphone nodig heb om het te testen.

Ik heb inmiddels wel de code W3C valid gemaakt e.d. Het gaat om de site *snip*. De meeste pagina's bevatten ook een Google Maps dive. Alleen de "auto" pagina niet dus wellicht dat die wel goed werkt op de Iphone (had ik nog willen testen).

De website bestaat in principe uit wat simpele divs. Wellicht dat ik er wat ranzigs van heb gemaakt omdat ik wat zat te stoeien met de divs voordat ze deden wat ik wilde. De HTML kan overigens ook wat netter, maar het is dus wel W3C ok.

Ik vermoed dat het aan mijn divs ligt, ik ben daar dan ook niet echt heer en meester in. En al helemaal niet met de do's en dont's van tegenwoordig met de smartphone browsers erbij. Eventueel ligt het dus (mede) aan de google maps div.

[ Voor 7% gewijzigd door RobIII op 04-08-2011 21:06 ]

[RobIII]

Als je je probleem wil illustreren maak dan een uitgeklede(!) testcase van enkel de relevante HTML/CSS/whatever om je probleem aan te tonen. Linken naar een volledige, in productie zijnde, site valt onder spam (ook al is je site niet commercieel). Daar komt bij dat je van ons verwacht in "andermans code" (lees jouw code) door de bomen 't bos te zien terwijl je zelf al moeite hebt je probleem te pinpointen. Dat gaat dus 't best als je ons voorziet van kleine, overzichtelijke, stukjes code waar we onze tanden in kunnen zetten, maar belangrijker, jij ook. Dat is dan ook de voornaamste reden van het verlangen van ons van een testcase; spam is een tweede minder wegende factor. In zo'n testcase is 't voor jezelf ook makkelijker zaken aan te passen en te fröbelen met allerlei zaken om te zien of 't je probleem oplost.

Daarbij leg je nogal wat nadruk op validatie/W3C. Merk op dat validatie niets zegt over of je site goed rendert op allerlei devices in allerlei omstandigheden. Veel meer dan dat je HTML "netjes" is zegt het niet (en netjes moet je dan nog verdomd breed interpreteren want je kunt ook een enorme puinhoop laten valideren ).

!null schreef op donderdag 04 augustus 2011 @ 20:55:
Ik heb er uiteraard wel wat op gezocht, maar ik kon nou niet iets nuttigs vinden waarmee ik dit probleem kon oplossen. Ook vrij waardeloos dat ik iedere keer vriend+Iphone nodig heb om het te testen.

Zoals je in onze Quickstart zult lezen zien we dan ook graag waar je op gezocht hebt, wat je vondt, wat je vermoed dat 't probleem is / kan zijn, wat je al geprobeerd hebt etc. etc. Daar zie ik in dit topic ook, helaas, maar weinig van terug.
Het feit dat je eventuele oplossingen die we aandragen (of die je zelf bedenkt) niet meteen kan testen maakt 't allemaal nog lastiger zoals je zelf ook al merkt. Misschien dat je van 1 van die vrienden tijdelijk een iPhone kunt lenen? Je kunt niet van ons verwachten dat wij je site gaan zitten debuggen op onze iPhones

[ Voor 51% gewijzigd door RobIII op 04-08-2011 21:15 ]

[!null]

Ik had gehoopt wat standaard probleempjes te vinden, of hier te horen, die vaak worden fout gedaan. Ik zou ook verwachten dat dit wel een veel voorkomend probleem is.

Het lullige is dat ik geen Iphone heb, anders had ik het waarschijnlijk vrij snel gelokaliseerd. Als je het niet weet ga je wel rigoreus dingen schrappen totdat het werkt. En als het hebt gelokaliseerd wat het is, een betere oplossing er voor in de plaats zetten (of het alsnog hier komen vragen als je het niet voor elkaar krijgt). Dus ik kan wel random gaan uitkleden, maar ik kan het niet testen.

Maar als iemand me kan vertellen of de "auto" pagina (http://www.lovetheworld.nl/de-auto) wel werkt met zoomen en alles op de Iphone, dan weet ik al of het aan Google Maps ligt.

Ik heb in de head een meta tag gezet om te zorgen dat hij standaard uitgezoomd staat, maar die is van geen invloed, waarschijnlijk omdat je uberhaupt niet KAN uitzoomen:

code:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />

Wat denk ik verder verdachte zaken zijn:

1. overflow: auto
Dit gebruik ik op meerdere plekken.

2. float: left;
Dit zou geen invloed moeten hebben of wel?

3. ronding van div (die niet eens werkt in IE)

code:

.menu {
    border: 2px solid black;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

Heeft dit invloed op het zoomgedrag? Lijkt me sterk maar ik heb een pagina gezien waar ze het wel aan elkaar koppelde qua gedrag.

[Bosmonster]

code:

user-scalable=no

Goh

user-scalable

Determines whether or not the user can zoom in and out—whether or not the user can change the scale of the viewport. Set to yes to allow scaling and no to disallow scaling. The default is yes.
Setting user-scalable to no also prevents a webpage from scrolling when entering text in an input field.
Available in iOS 1.0 and later.

[ Voor 91% gewijzigd door Bosmonster op 04-08-2011 21:48 ]

[Tharulerz]

Heb je uberhaupt die meta tag gelezen? Je zet daar de parameter user-scalable op no, en toch wil je dat je gebruikers kunnen zoomen?

Edit: bosmonster: boo!

[ Voor 8% gewijzigd door Tharulerz op 04-08-2011 21:46 ]

[Bosmonster]

Tharulerz schreef op donderdag 04 augustus 2011 @ 21:45:

Edit: bosmonster: boo!

[!null]

Daarvoor deed hij het ook al niet. Dus daar ligt het niet aan. En ik ben idd gestopt met lezen na: "width=device-width, initial-scale=1.0". In principe zijn die twee tags ook alles wat ik nodig heb toch?
Maar dan nog, al smijt ik die hele meta tag eruit, en start hij default verkeerd gezoomd, uitzoomen kon zonder deze meta tag ook niet.

Ik heb hem er nu uitgehaald. Eventueel plaats ik hem later terug met alleen de eerste twee tags erin.

[ Voor 8% gewijzigd door !null op 04-08-2011 21:50 ]

[Voutloos]

Tja, dit debugt natuurlijk voor geen meter zo zonder apparaat.

Ga er maar vanuit dat het gefixed is als je dat ding wegknikkert. Haal het weg, vraag of een vriend de pagina refresht en trek de champagne maar open.

offtopic:
debugt, gefixed en refresht. Hoeveel leraren Nederlands draaien zich nu om in hun graf?

!null schreef op donderdag 04 augustus 2011 @ 21:50:
Daarvoor deed hij het ook al niet. Dus daar ligt het niet aan. En ik ben idd gestopt met lezen na: "width=device-width, initial-scale=1.0".

Verwacht dan ook niet dat wij alles van jou lezen.

Ik heb hem er nu uitgehaald. Eventueel plaats ik hem later terug met alleen de eerste twee tags erin.

Dat zijn attributen.

[ Voor 59% gewijzigd door Voutloos op 04-08-2011 21:56 ]

[!null]

Bedankt voor de waardevolle toevoegingen

Laten we niet te veel gaan zeiken op kansloze pogingen van mij om het probleem op te lossen zonder de oplossing te kunnen testen. Meta tag = weg, en men kan (waarschijnlijk) nog steeds niet (uit)zoomen. Iemand met een Iphone hier die me kan vertellen of het zoomen wel werkt op de auto pagina zoals ik eerder al vroeg?
http://www.lovetheworld.nl/de-auto

[ Voor 146% gewijzigd door !null op 04-08-2011 22:01 ]

[Tharulerz]

Wat snap je nou niet aan onze posts?

Ik kijk op men iphone, ik kan niet uitzoomen
Ik kijk in je broncode, wat staat er:

HTML:

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

Tsjonge jonge...

[Voutloos]

!null schreef op donderdag 04 augustus 2011 @ 21:58:
Laten we niet te veel gaan zeiken op kansloze pogingen van mij om het probleem op te lossen zonder de oplossing te kunnen testen.

Tot nu toe is alles, op 1 grappig troll plaatje louter opbouwend geweest, kan het moeilijk zeiken noemen.

Meta tag = weg, en men kan (waarschijnlijk) nog steeds niet (uit)zoomen

Dat zijn 2 verkeerde aannames. De tag is blijkbaar niet weg, en bovendien gok je dat het niet helpt terwijl je neit kan testen. Wat die regel doet is al toegelicht, dus je kan er vanuit gaan dat je hem in huidige vorm in ieder geval niet wilt hebben.

[!null]

Edit: Hij stond er twee keer in geloof ik, ik had eerst iets anders weggehaald.

Anyway, nu is hij echt weg, en als het nu verschil maakt dan ligt het aan mijn iedere pogingen (w3c valide maken enzo).

[ Voor 80% gewijzigd door !null op 04-08-2011 22:11 ]

[Voutloos]

Nou, dan is het filesystem van je hoster absurd traag, of je vergeet zelf te FTPen of het bestand op de goede locatie up te daten.

Heb je zelf al in de broncode gekeken? Nu maak je de aanname dat wij maar wat liegen om je te pesten...

[ Voor 7% gewijzigd door Voutloos op 04-08-2011 22:11 ]

[Beatboxx]

Hier werkt t perfect;)

Hij staat ook hier in de broncode er nog steeds in... Zeker dat ie goed geüpdate is?

iPhone 4 16GB
iOS: 4.3.4 (8K2)

[ Voor 79% gewijzigd door Beatboxx op 04-08-2011 22:12 ]

[Voutloos]

Goed, je kan dus aan de champagne.

[Tharulerz]

!null schreef op donderdag 04 augustus 2011 @ 22:08:
Wat snap je nou niet aan mijn posts? En kijk nog eens in de broncode.... Ik heb dat ding allang weggehaald en al twee kaar uitgelegd dat het daar niet aan ligt.

Tsjonge jonge...

Hoppa kijk eens aan! Hij haalt NU PAS meta tag weg, en het ding werkt gewoon perfect.

Als je naar tweakers.net komt om hulp te vragen en de hulp die je krijgt gewoon negeert of denkt dat je het beter weet, los je problemen dan in het vervolg zelf op imo.

[Ventieldopje]

HTML:

<body onload="initialize()">

Er handig als je geen javascript include

[F.West98]

OK, android werkt hier
met regel erin was pic verkeerd en niet zoomen, nu wel

[!null]

Ik had er dus twee keer een viewport metatag in staan, zonder goeie reden. Waarom weet ik niet.

Anyway, voordat die viewport metatags erin stonden werkte hij dus ook niet. Dus blijkbaar lag het toch aan de dingen die ik random heb geprobeerd zoals w3c valide maken en een twijfelachtig css regeltje weghalen.

Bedankt voor het testen en meekijken i.i.g.

Staat hij nu ook default uitgezoomd of moet ik daarvoor toch nog even een vieport metatag voor toevoegen? (en dan wel de juiste )

[ Voor 15% gewijzigd door !null op 04-08-2011 22:15 ]

[Voutloos]

!null schreef op donderdag 04 augustus 2011 @ 22:15:
Ik had er dus twee keer een viewport metatag in staan, zonder goeie reden. Waarom weet ik niet.

Anyway, voordat die viewport metatags erin stonden werkte hij dus ook niet. Dus blijkbaar lag het toch aan de dingen die ik random heb geprobeerd zoals w3c valide maken en een twijfelachtig css regeltje weghalen.

Als je editor een history functie heeft, of als je versiebeheer hebt, kan je heel makkelijk achterhalen vanaf welk punt het probleem ontstaan is. Overigens browse ik belachelijk veel @ iphone, en ben nog geen site tegengekomen die niet scalet zonder deze tag of bepaalde javascript waar je direct al braakneigingen van krijgt. Mobile safari is niet perfect, maar het schalen is wel een van zn sterkste punten.

Staat hij nu ook default uitgezoomd of moet ik daarvoor toch nog even een vieport metatag voor toevoegen? (en dan wel de juiste )

Getest, en is default al prima @ iphone hoor. Geen enkele reden om hier aan te sleutelen. Mocht die reden er wel komen, moet je dat gewoon even doen als een vriend met iphone bij jou is.

[ Voor 12% gewijzigd door Voutloos op 04-08-2011 22:24 ]

[!null]

Voutloos schreef op donderdag 04 augustus 2011 @ 22:21:
[...]
Als je editor een history functie heeft, of als je versiebeheer hebt, kan je heel makkelijk achterhalen vanaf welk punt het probleem ontstaan is.

Nee want ik heb geen Iphone Verder heb ik voor deze site geen versiebeheer, wat eigenlijk altijd wel welkom is. Nu ik effe met de editor history terug ga vermoed ik dat het dit twijfelachtige css regeltje was (geen idee waarvoor ik die heb neergezet of waar die vandaan komt).

code:

html { height: 100% }

De wijzigingen om hem w3c valide te maken waren namelijk pietluttig en hadden niks met divs e.d. te maken.

[...]
Getest, en is default al prima @ iphone hoor. Geen enkele reden om hier aan te sleutelen. Mocht die reden er wel komen, moet je dat gewoon even doen als een vriend met iphone bij jou is.

Ja, zeker zo laten. Ik ga geen dingen toevoegen als het niet nodig is, lieft zo kaal mogeiljk. Op mijn vaste baan zit ik dagelijks te bitn**ken op layer 2 en 3 van "de ladder" dus ik ben iemand van weinig fratsen (en lever dus uiterst sobere websites op haha)

Bedankt.