weergave in safari verkeerd

Heb ik weer.....

Ik heb deze website gemaakt: http://met-rob.com/advocaat/strafrecht.html

Ik heb gekeken op de website responsinator om de kijken hoe de weergave is op diverse schermen.
Daar geeft hij de website op bijvoorbeeld een iphone prima weer. (zie screenshot)

Maar de realiteit is (weer) anders.

Als ik de website op mijn imac bekijk in firefox en chrome op een smal scherm is de weergave goed.
Ook op mijn android telefoon is er niks aan de hand.

Maar zowel in safari op mijn imac als op een iphone wordt de foto die onder de menubalk staat helemaal uitgetrokken naar beneden.

In de tweede screenshot zie je links de weergave in safari, in het midden firefox en rechts chrome.

Ik heb geen idee hoe dit kan.

opgelost

Ik heb het goed weten te krijgen.

Eerst stond er dit: <div class="col-md-13 d-flex">

dat heb ik veranderd in dit: <div class="col-md-13">


En nu is het goed.

Als je wilt weten of de website op elk apparaat er goed uit ziet dan is er een handige manier. Gebruik Internet Explorer (jaja, het zit standaard in Windows 10) en ga naar de website. Gebruik je muis om IE11 smaller en breder te maken. Op elke breedte moet de website er goed uit zien! Zo niet, dan is de website niet responsive.

Met IE11 kan je op elke breedte vanaf 210px testen. Omdat die apparaten er niet meer zijn kan je voor moderne smartphones 320px aanhouden. De 320px breedte kan je in IE11 makkelijk zien door het menu aan te zetten en de browser dusdanig smal te maken dat de H in het menu net uit beeld verdwijnt.

Wat die online tools doen is hetzelfde als wat je in IE11 doet, ze maken de "view width" smaller en breder.



Aanvulling. De werkelijke resolutie van een scherm is iets anders dan de "css resolutie" van een scherm. Dit geldt met name bij mobiele apparaten.

Voorbeeld Samsung Galaxy S10
Scherm resolutie: 1440 x 3040 pixel
CSS resolutie: 360 x 760 pixel

Ik heb geen pc hier, alleen een imac.

Maar wat jij beschrijft doe ik normaal gesproken ook in safari en firefox. Dat kun je zien aan die afbeelding met die 3 screenshots naast elkaar. Dat heb ik op dezelfde manier zoals jij beschrijft gedaan.

Maar omdat ik nog nooit had meegemaakt dat alleen in safari een verkeerde weergave tevoorschijn kwam, ben ik naar die ene website gegaan voor een "second opinion" zeg maar.

Een vraagje aan jou.
Over responsive testen met een browser heb ik hier een post (klik) geplaatst.

Omdat er geen Safari voor Windows 10 is kan ik niet testen wat de voor- en nadelen zijn bij Safari.
Wil jij dit nakijken? Dan kan ik die post compleet maken.

Je hebt het bij elke browser over de standaard View. Hoe kan ik die controleren of zien?

Je hebt het bij elke browser over de standaard View. Hoe kan ik die controleren of zien?

Klik om te vergroten...

Hiermee bedoel ik de viewport, dat is in de browser het bruikbare gedeelte voor een webpagina, zie kader in de screenshot. Eventuele schuifbalk(en) horen bij de pagina en staan dus in de viewport.



Voor webdesign gaat het om de 'css breedte' van de viewport, die wordt gebruikt in @media(min-width) en @media(max-width). Om de viewport afmetingen te bekijken heb ik een tool gemaakt op deze pagina (klik). . Als je de browser groter of kleiner maakt dan zie je wat er gebeurt.

Safari: zet de browser op z'n smalst, dan zie je de kleinste 'viewport width'.
Ontwikkeltools: als je ze niet hebt, ga dan naar Voorkeuren, klik op 'Geavanceerd' en dan 'Toon Ontwikkel-menu in menubalk'.

Als ik op "ontwikkel" klik heb ik een hoop opties.

Waar moet ik op klikken om te vinden wat jij zoekt?

Het gaat om menu Ontwikkel => Schakel over naar adaptieve ontwerpmodus
Ik vond op een andere website deze screenshot.



Aan jou de vraag of je in Safari responsive kan testen in plaats van vaste resoluties of bepaalde apparaten?
Dus dat je met de muis de browser op elke breedte vanaf circa 300 pixels kan zetten, of eventueel vanaf 240px voor oude smartphones. Ter vergelijking in Chrome

Heb net gekeken en dat is mogelijk.

Dan moet je hierop klikken (zie bijlage)


En dan krijg je dit:

Als alleen vaste "apparaat resoluties" getest kunnen worden dan kan je met Safari niet de responsive weergave van een pagina testen. Vergelijk het met Chrome, die kan je met de muis op elke resolutie slepen en heeft "touchscreen" emulatie.

Met de muis elke resolutie testen.

Bekijk bijlage 348565

Met de muis een touchscreen emuleren

Bekijk bijlage 348566

Misschien vaker chrome gebruiken dan maar denk ik

Het lijkt erop dat Safari (op iBook/iMac) toch een responsive test feature heeft met de twee handles links en rechts.

Bekijk bijlage 348574

1. apparaat of resolutie kiezen
2. pixel verhouding veranderen (voorbeeld in post #3)
3. user-agent veranderen (niet interessant)
4. de magic handles om responsive te testen

Het gaat om 4. Met deze twee handles kan je testen of een pagina responsive is.