Pixels

Status
Niet open voor verdere reacties.
Het blijkt weer ingewikkelder te zijn dan ik al dacht.
Omdat ik het vermoeden kreeg dat het euvel bij de provider zit schreef ik die:

Beste medewerker Hosting2GO,
Sinds kort maak ik met plezier gebruik van enkele subdomeinen van Hosting2GO. Ik heb daarvoor o.a. deze twee mobiele websites gemaakt. Die komen bij mijn Samsung Galaxy goed op het scherm te staan want ik hoef niet uit te zoomen of in te zoomen:
mobiel.verbodengeschriften.nl
mobiel.pc-makkelijk.nl
Maar, bij onderstaande mobiele website moet ik altijd uitzoomen om hem goed leesbaar in beeld te krijgen:
mobile.gospelofthomas.org
Ik heb dagenlang eindeloos geexperimenteerd maar krijg het niet goed. Kan het misschien aan de server liggen? Want als ik de pagina van mobiel.pc-makkelijk.nl op de url mobile.gospelofthomas.org zet, dan moet ik ook die pagina uitzoomen. En als ik de mobiele pagina van mobiel.gospelofthomas op mobiel.pc-makkelijk.nl zet dan hoef ik weer niet uit te zoomen.
Vriendelijke groet.

Het antwoord van de provider:

Beste,
Dit soort problemen zijn eigenlijk altijd website/script gerelateerd. De oorzaak zou kunnen liggen in .htaccess-bestanden of php.ini waarin op de verschillende servers kleine verschillen zitten. Ook css-bestanden kunnen op de ene server net iets anders zijn dan op de andere, dus check die ook.
Met vriendelijke groet,
Guido Hoogsteder
Hosting2GO Helpdesk

Ik heb alle betreffende .htaccess-bestanden nagekeken en zonodig aangepast, maar zonder resultaat.
Jouw laatste advies had ik al eerder op internet gevonden en uitgeprobeerd, maar dat van jou moet ik ook nog testen.
 
Ik ben niet erg bekend met CSS. Heb ik het zo goed gedaan?

<style>
@media screen and (max-width: 1000px) {
.img_header {
background: url(/afbeeldingen/titel900x177.gif);
width: 900px;
height: 200px;
}
}

@media screen and (max-width: 720px) {
.img_header {
background: url(/afbeeldingen/titel720x142.gif);
width: 900px;
height 200px;
}
}
</style>
</head>
<body>
<br>
<div class="img_header"></div>
 
Zo ben ik weer :)

Excuses dat het zo lang duurde, ze belde me voor een onderzoek.

Er zijn een aantal dingen mis met je gospel site: PS: Pak dit overigens niet verkeerd op, ik probeer je te helpen :D!

  • Inspringen is ver te zoeken :)
  • Te veel herhalende code (bij de <p>'s heb je OVERAL dezelfde css toegepast, dat kan ook in een klasse)

    vb: je hebt bij alle <p>'s het volgende:

    HTML: 
    color: black; text-align: left; font-size: 35pt; font-family: sans-serif;
    Als je dat in een klasse zet:

    HTML: 
    p.gospel{
	line-height:200%;
	color: black; 
	text-align: left; 
	font-size: 35pt; 
	font-family: sans-serif;
}

    dan hoef je alleen bij een nieuwe paragraaf het volgende te doen:
    HTML: 
    <p class = "gospel"></p>
    Als je dan ooit het lettertyp wilt veranderen kan dit in 1x op alle <p>'s​
  • Inline css i.p.v extern css file (zie bovenstaande punt)
  • fouten: http://validator.w3.org/check?uri=h...(detect+automatically)&doctype=Inline&group=0
  • uiteraard kloppen de media queries niet (want hij doet het niet op een mobieltje

Dan nu het leuke gedeelte!!

Ik heb http://mobile.gospelofthomas.org/ gedownload en verbeterd, ook heb ik mobile werkend gemaakt!

De complete source kan je hier vinden: http://www.mediafire.com/?ercoqcpl2hdx7yh

Dan zal ik hier verder gaan met de uitleg :):


in beide bestanden:
  • Netjes neergezet
In het index.html bestand:

  • Ik heb de metadata en de rest van de head netjes op 1 lijn gezet, dit is niet iets dat je gemakkelijk moet willen lezen ;)
  • Ik heb een div gemaakt met id header (daar wordt nu via css de foto in gezet, en ook verandert op kleinere apparaten)
  • Ik heb een lege "wrapper" div gemaakt om de rest van de elementen te behouden
  • Ik heb in plaats van 20 <p>'s gekozen om er 1 van te maken en dan te werken met line-height in css, op deze manier gebeurt alles in 1x en heb je niet die "rommel" van al die paragrafen.
  • Ik heb de footer die je gemaakt had vervangen door een footer die automatisch de puntjes zet (dat is wel zo netjes)
  • Ik heb een hyperlink toegevoegd aan de complete website link
  • Code is zonder fouten (volgens w3scool)
  • met:
    HTML: 
    <link href="newstyle.css" media="all" rel="stylesheet" type="text/css">
    heb ik ervoor gezorgd dat nu de css geladen word uit newstyle.css

In newstyle.css

  • Ik heb aan de body van je website word-wrap normal meegegeven zodat woorden niet verdwijnen naast het scherm maar netjes eronder worden gezet
  • Alle css voor de header staat nu in een css formaat (LET OP! ik heb hier # gebruikt # = id, dus dan doe je div id = "header". Voor de rest van het document gebruik ik classes (class = "")
  • In de div.footer{...} staat de code die regelt dat er automatisch puntjes komen boven je footer
  • p.gospel is zoals eerder uitgelegd je <p> tag met wat styling (wat je eerst in het .html bestand deed)
  • Ik heb 1 media query toegevoegd, die zal zodra het scherm kleiner wordt als 830px de afbeelding veranderen. (en gelijk de hoogte en breedte van de div aanpassen)
  • Uiteraard ook gevalideerd door w3


Ik hoop dat u door het downloaden en bekijken van mijn voorbeeldbestanden een stuk verder kunt komen!

[edit]De map alternatief is gemaakt met alle <p>'s behouden. Daar doen ook de mediaquery's het niet, dit kan je beschouwen als "nog een manier om het te doen" [/edit]
 
Laatst bewerkt:
Thomasje zei:
Ik ben niet erg bekend met CSS. Heb ik het zo goed gedaan?

<style>
@media screen and (max-width: 1000px) {
.img_header {
background: url(/afbeeldingen/titel900x177.gif);
width: 900px;
height: 200px;
}
}

@media screen and (max-width: 720px) {
.img_header {
background: url(/afbeeldingen/titel720x142.gif);
width: 900px;
height 200px;
}
}
</style>
</head>
<body>
<br>
<div class="img_header"></div>
Klik om te vergroten...

Dat ziet er goed uit hoor ;), bekijk ook eens mijn vorige post voor wat meer tips!
 
Al beginnen de jaren bij mij te tellen, je hoeft geen u te zeggen hoor.
Ik neem aan dat je met de "gospel site" mobile.gospelofthomas.org bedoelt.
De oplossing van de footer is inderdaad een verbetering, daar had ik niet aan gedacht. Ik weet dat het met css te regelen is om het font van een hele website met een paar klikken te kunnen veranderen, maar daar maak ik nooit gebruik van omdat de sites die ik bouw qua uiterlijk niet met de mode mee hoeven te gaan. En ik krijg van mijn opdrachtgever alle vrijheid, die stelt geen bijzondere eisen. Ik heb mobile.gospelofthomas.org met Kompozer gemaakt, die heeft dus de css-code gegenereerd. Ik heb me nog niet verdiept in de mogelijkheid dat Kopozer ook css-stijlbladen kan maken, maar eerlijk gezegd vind dat lastig en eigenlijk niet zo belangrijk in mijn geval, als de webpagina maar op het scherm verschijnt zoals bedoeld en het w3c geen fouten of waarschuwingen aangeeft. Ondanks al mijn inspanningen vind ik css erg lastig, maar als met css te regelen is dat een site goed op telefoons verschijnt dan ben ik natuurlijk voor het toepassen er van.

In de door jou gemaakte code zag ik een aantal spaties die volgens mij weg mochten, wat ik ook gedaan heb. En een paar keer: /> (spatie, slash, haak sluiten) wat ik verwijderd heb omdat het geen xhtml is maar html.

Jouw aanvullingen zijn een hele verbetering, maar mobile.gospelofthomas.org komt nog niet goed op het scherm van mijn Samsung want ik moet nog steeds met de vingers uitzoomen.
 
Ik heb de site die je noemt bekeken en hij bevestigd mijn ervaring die ik heb opgedaan bij alle experimenten van de afgelopen tijd v.w.b. het herkennen van een mobiel apparaat. Maar ik bekijk het op mijn gemaak allemaal nog eens.
 
Tja, je moet een manier kiezen die bij u past!

Ikzelf vind dat een telefoon is om mee te bellen, niet om mee op internet allerlei websites te bekijken :P
 
Ik vind een telefoon niet handig om mee te internetten, alhoewel een iPhone met het prachtige retina scherm al heel wat comfortabeler is dan zijn voorgangers. Waar het mij om gaat is, dat ik er rekening mee wil houden dat steeds meer mensen de websites die ik onderhoud bezoeken met hun telefoon.
 
Het retina van een iphone is niks vergeleken met een mooie fullHD telefoon :)
 
Thomasje zei:
Wat moet ik mij voorstellen bij een fullHD telefoon?
Klik om te vergroten...

Dat is 1920x1080 (fullHD) op een telefoon, dat is superhelder en allemaal heel mooi. maar zodra je een website gaat bekijken die geen mobiele site heeft is alles superklein :P
 
iPhone 5 heeft een schermresolite van 640x1136 en daarvan zijn de pixels met het blote oog al niet te zien. Ik begrijp niet wat dan de zin is van 1920x1080. Of bestaan er mobiele telefoons met een nog groter scherm dan dat van de iPhone?
 
Thomasje zei:
iPhone 5 heeft een schermresolite van 640x1136 en daarvan zijn de pixels met het blote oog al niet te zien. Ik begrijp niet wat dan de zin is van 1920x1080. Of bestaan er mobiele telefoons met een nog groter scherm dan dat van de iPhone?
Klik om te vergroten...

Ja hoor, de iphone heeft een HEEL klein scherm :P

Ikzelf heb een Note II (5.5") en er komt binnekort een telefoon met 6" scherm.
 
mastermindzh zei:
Ja hoor, de iphone heeft een HEEL klein scherm :P
Klik om te vergroten...

First of all, sorry for English.

Yes, you are absolutely right, the iPhone indeed has a relatively small screen. In fact, iPhone 4+ resolution is 640px, but the browser only displays 320px of it, for a number of different reasons. Therefore you should aim towards 320px I’d say.

I hope this helps.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan