Onjuist weergeven mobiele site

Status
Niet open voor verdere reacties.

Thomasje

Gebruiker
Lid geworden
12 mei 2007
Berichten
337
Ik heb bij provider Hosting2GO drie mobiele websites op een subdomein staan:

1. http://mobiel.verbodengeschriften.nl
2. http://mobiel.pc-makkelijk.nl
3. http://mobile.gospelofthomas.org.

De websites op url nummer 1 en 2 worden prima weergegeven. Met nummer 3 heb ik al jaren het probleem dat het font veel te groot op het scherm van een mobiele telefoon komt, alsof je een desktop-website op de mobiel bekijkt. Kan de configuratie van een server daarvan de oorzaak zijn? De provider zegt van niet, maar dit zijn de resultaten van een paar van mijn testjes:

De home-pagina van mobiel.verbodengeschriften.nl geplaatst op de url van mobile.gospelofthomas.org (server77.hosting2go.nl) geeft als resultaat: te groot font.

Ook de home-pagina van mobiel.pc-makkelijk.nl geplaatst op de url van mobile.gospelofthomas.org geeft als resultaat: te groot font.

Maar als ik de home-pagina van mobile.gospelofthomas.org plaats op de url van mobiel.pc-makkelijk.nl (server95.hosting2go.nl) dan wordt de pagina wel goed weergegeven.

Ik heb de broncode van de home-pagina van mobile.gospelofthomas.org op verschillende manieren aangepast, maar dat gaf steeds geen verbetering. Ik tob al jaren met dit probleem. Volgens mij kunnen serverinstellingen het resultaat in de browser beïnvloeden, maar ik weet niet of die de fontgrootte (de weergave-grootte van de pagina) kunnen manipuleren. Waar gaat het fout?
 
Laatst bewerkt:
Verander dan de font-size?

Tip: maak geen gebruik van inline CSS, maar van meerde CSS files, en maak dan gebruik van media queries, voorbeeldje;
Code:
/* 	==[ Copyright 2014 - dylaan.nl ]== 
	==[ Deze CSS mag niet gekopieerd worden voor eigen gebruik ]==
*/

/* Reset */
@import url('reset.css');

/* Load colors etc */
@import url('main.css');

/* Media queries */
@import url('phone.css') 		(min-width:0px) and (max-width:480px);
@import url('tablet.css') 		(min-width:481px) and (max-width:640px); 
@import url('tablet_high.css') 	(min-width:641px) and (max-width:960px);
@import url('laptop.css')		(min-width:961px) and (max-width:1024px);
@import url('desktop.css')		(min-width:1025px) and (max-width:1280px);
@import url('desktop_high.css')	(min-width:1281px);
Ik maak een uitzondering, je mag de deze CSS kopieeren.
 
@import url('desktop.css') (min-width:1025px) and (max-width:1280px);
@import url('desktop_high.css') (min-width:1281px);
Deze oplossing is niet future-proof. De resolutie van alle devices wordt steeds groter, zowel de 4 inch phone als de 65 inch tv (en groter). Binnen 1 a 2 jaar hebben al deze devices minimaal Full HD. Dit beteknt dat met deze queries elke device alleen 'desktop_high.css' krijgt... En om het nog lastiger te maken zijn er phones die een hogere resolutie hebben dan een 15 inch laptop, 24 inch desktop of 65 inch tv, ppffff...

Je kunt in een browser niet uitlezen welk type device het is of wat het hardware schermformaat is. Je kunt wel de browser viewport widht/height opvragen maar die geeft geen informatie over het echte schermformaat.

Alternatief 1. Het gebruik van de user-agent string. Hier zijn o.a. php en js scripts voor (googel even op 'mobile detect') maar deze scripts lopen altijd achter op de werkelijkheid omdat er steeds nieuwe mobile series uitkomen.

Alternatief 2. Maak in de pagina twee drukknopjes <mobile> / <desktop> weergave waarmee je een css gebrukt die aangepast is voor een klein of juist groot schermformaat.

Mijn voorkeur gaat uiit naar een css die voor alle schermformaten hetzelfde is. Als je uitgaat van mobile-first in je css dan kom je al heel ver omdat het marktaandeel van de schermen tussen 6 en 15 inch behoorlijk groot is geworden. De tv- of de google bril gebruiker zal dit ook waarderen omdat zij op een grote of juist kleine afstand van het scherm zitten. Alleen de desktop gebruiker met een groot scherm zal behoorlijk grote letters op het scherm krijgen. Eventueel gebruik je dan alternatief 2 in je pagina.

Have fun :cool:
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan