Website mobile friendly maken

Black Tiger

Addicted Member
Administrator
Moderator
Lid sinds
8 feb 2001
Berichten
32.260
Waarderingsscore
186
Punten
63
Leeftijd
57
Locatie
State Penitentiary
Ik ben bezig een website mobiel friendly te maken.

Nu had ik een test gedaan en dan krijg ik het volgende te zien:

Mobile- and other Chrome-Checks​

widthheight
visual Viewport396716
content Size8501560


Fatal: Horizontal scrollbar detected. Content-size width is greater then visual Viewport width.

Hieruit blijkt dus dat er een horizontale scroll komt en dat content size te breed is waardoor er op mobiel ene horizontale scroll balk ontstaat. Het gaat hier volgens mij om de achtergrond afbeelding.

Nu weet ik wel dat je die horizontale balk kunt uitschakelen maar dan ziet die afbeelding niet uit.
Op dit moment heb ik deze instelling op de pagina staan, want het gaat om een gewone php site, geen CMS dus.
Code:
<meta name="viewport" content="width=device-width, initial-scale=1">

Schijnbaar helpt dit niet voor de afbeelding, schijnbaar niet voor de hele website, dus vermoedelijk staat er ergens anders nog iets verkeerd.
Hoe krijg ik dit gefixed?
 

eendenteam

Addicted Member
Administrator
Moderator
Lid sinds
1 feb 2004
Berichten
6.143
Waarderingsscore
18
Punten
38
Leeftijd
119
ik feite wil je dus dat de website zich aanpast aan het scherm van de gebruiker. Dat wordt “responsive layout” of “responsive design” genoemd. Wellicht helpt een “Google” naar beide termen
 

Black Tiger

Addicted Member
Administrator
Moderator
Lid sinds
8 feb 2001
Berichten
32.260
Waarderingsscore
186
Punten
63
Leeftijd
57
Locatie
State Penitentiary
Dank, maar die termen zijn me al lang bekend. De site is ook responsive, maar dat helpt niet altijd bij mobiel.
Echter ik ben ook niet goed bekend met PHP. Ik dacht dat er hier op het forum ook wel iemand zat die aan webdesign deed of er iets van wist. Misschien @Maxstar? Anders ga ik eens elders proberen.
 

Maxstar

New Member
Lid sinds
20 jan 2021
Berichten
23
Waarderingsscore
3
Punten
3
Als het enkel de background van de website betreft zou dit middels CSS te fixen moeten zijn. Zonder CSS zal het in de php-code een ander verhaal worden denk ik?

Code:
 /* Smaller than 600px: */
body {
  background-image: url('back_small.jpg');
}

/* 600px and larger: */
@media only screen and (min-width: 600px) {
  body {
    background-image: url('back_normals.jpg');
  }
}
 

Black Tiger

Addicted Member
Administrator
Moderator
Lid sinds
8 feb 2001
Berichten
32.260
Waarderingsscore
186
Punten
63
Leeftijd
57
Locatie
State Penitentiary
Ik heb wel CSS maar weet niet precies hoe ik dat moet doen. Op dit moment ziet dat er zo uit, naam van de afbeelding even aangepast.

Code:
html {
// background-color : #283CCD;
  background: url('../images/achtergrond.jpg') top left #f8f8f8;
            background-size: cover;
                background-attachment: fixed;
}
body {
font-family : Arial, Helvetica, sans-serif;
padding : 0;
margin : 50px;
font-size : small;
}
img {
border : none;
}
Dat heb ik volgens mij zo moeten doen om te zorgen dat hij op pagina's waarin de afbeelding op de voorgrond pastte de pagina niet verticaal ging scrollen en als de afbeelding op de voorgrond lange was, dat wel die voorgrond kon scrollen, maar de achtergrondafbeelding bleef staan.

Als ik me het goed herinner. ;)
 

Maxstar

New Member
Lid sinds
20 jan 2021
Berichten
23
Waarderingsscore
3
Punten
3
Kijk eens bij de volgende link, mogelijk is dit de oplossing voor het probleem.
Some mobile devices have a problem with background-attachment being fixed, so to fix this, you just need to use media queries to turn off the parallax effect for mobile devices by setting background-attachment to scroll.
 

Black Tiger

Addicted Member
Administrator
Moderator
Lid sinds
8 feb 2001
Berichten
32.260
Waarderingsscore
186
Punten
63
Leeftijd
57
Locatie
State Penitentiary
Ik begrijp daar geen bal van eerlijk gezegd. Nooit op toegelegd.

Moet dit er dan los staan of moet ik dit ergens bij zetten onder die html tag?
Code:
@media only screen and (max-device-width: 1366px) {
  .bg {
    background-attachment: scroll;
  }
}

En gaat dit er niet voor zorgen dat er op een pc opnieuw een verticale scrollbalk komt? Die device width lijkt me ook niet lekker.
Kan het wel eens proberen maar dan moet ik weten waar ik dit zetten moet.
 

Maxstar

New Member
Lid sinds
20 jan 2021
Berichten
23
Waarderingsscore
3
Punten
3
Hoe zie de opmaak van de php-site er verder uit, dan maakt het een en ander wellicht wat duidelijker hoe je de stylesheet kan aanpassen.

Edit:
Mogelijk is dit de oplossing.

CSS:
html {
 position: fixed;
 background-image: url('../images/achtergrond.jpg') top left #f8f8f8;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%:
 z-index: 0;
}

body {
font-family : Arial, Helvetica, sans-serif;
padding : 0;
margin : 50px;
font-size : small;
}
img {
border : none;
}
 
Laatst bewerkt:

Black Tiger

Addicted Member
Administrator
Moderator
Lid sinds
8 feb 2001
Berichten
32.260
Waarderingsscore
186
Punten
63
Leeftijd
57
Locatie
State Penitentiary
De body en img tag is hetzelfde als bij mij dus daar hoeft niets aan veranderd te worden.

Ik heb even getest zoals jij het weer geeft, dan is er geen horizontale scrollbalk meer, maar op de mobiel resized er ook niets.
Andere pagina's zijn opeens heel klein. Weet niet zeker of dat voorheen ook zo was.

Ik geef je even een adres per pm dan kun je zien wat ik bedoel.
 

Black Tiger

Addicted Member
Administrator
Moderator
Lid sinds
8 feb 2001
Berichten
32.260
Waarderingsscore
186
Punten
63
Leeftijd
57
Locatie
State Penitentiary
Ja dat klopt, ik kan je ook de hele .css wel toesturen, er is nog een aparte site.webmanifest met deze content:
Code:
{
    "name": "",
    "short_name": "",
    "icons": [
        {
            "src": "/android-chrome-96x96.png",
            "sizes": "96x96",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
}

Ben vergeten waarom die er in moest. En het headerlogo heeft nog wat javascript.
Dus er is nog een slideshow.js aanwezig voor dat headerlogo. Via pm weet je de site dus zie je ook wel wat dat doet als het goed is.
 



Hosting Fun

Bovenaan Onderaan