Y brif broblem sy'n gysylltiedig â phorth gwylio newid HTML i faint ffôn clyfar yw y gall achosi i'r wefan ddod yn anymatebol neu arddangos yn anghywir. Mae hyn oherwydd pan fydd y porth gwylio yn cael ei newid, efallai na fydd y wefan wedi'i optimeiddio ar gyfer maint sgrin lai ac efallai na fydd yn gallu lleihau ei chynnwys yn iawn. Yn ogystal, efallai na fydd rhai nodweddion yn gweithio'n gywir ar sgrin lai, fel dewislenni llywio neu elfennau rhyngweithiol.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1. Mae'r llinell hon o god yn tag meta, sy'n darparu gwybodaeth am y ddogfen HTML i'r porwr.
2. Mae'r priodoledd enw wedi'i osod i “viewport”, sy'n dweud wrth y porwr bod y tag hwn yn cynnwys gwybodaeth am sut y dylid arddangos y dudalen ar wahanol ddyfeisiau.
3. Mae priodoledd y cynnwys wedi'i osod i “width=device-width, initial-scale=1.0”, sy'n dweud wrth y porwr y dylai ddefnyddio lled y ddyfais fel lled y dudalen a'i raddio i fyny neu i lawr oddi yno os oes angen.
Dylunio Gwe Ymatebol
Mae dylunio gwe ymatebol yn ymagwedd at ddylunio gwe sy'n gwneud i dudalennau gwe rendrad yn dda ar amrywiaeth o ddyfeisiau a meintiau ffenestr neu sgrin. Mae'n defnyddio cyfuniad o gridiau a chynlluniau hyblyg, delweddau a defnydd deallus o ymholiadau cyfryngau CSS. Mae gwefannau ymatebol wedi'u cynllunio i ddarparu'r profiad gwylio gorau posibl - darllen a llywio hawdd gyda lleiafswm o newid maint, panio a sgrolio - ar draws ystod eang o ddyfeisiau (o fonitorau cyfrifiaduron bwrdd gwaith i ffonau symudol).
Yn HTML, gellir cyflawni dyluniad ymatebol trwy ddefnyddio'r technegau canlynol:
• Gridiau hyblyg – Mae defnyddio unedau cymharol fel canrannau neu ems yn lle unedau lled sefydlog fel picsel ar gyfer elfennau cynllun yn caniatáu i'r dudalen addasu'n hyblyg i wahanol feintiau sgrin.
• Ymholiadau cyfryngau – mae ymholiadau cyfryngau CSS3 yn galluogi datblygwyr i nodi gwahanol arddulliau ar gyfer lled dyfeisiau gwahanol. Mae hyn yn caniatáu i gynllun y dudalen addasu yn unol â hynny yn dibynnu ar y ddyfais a ddefnyddir.
• Delweddau ymatebol – Gellir gwneud delweddau'n ymatebol trwy ddefnyddio'r nodwedd srcset yn HTML5 sy'n galluogi datblygwyr i nodi fersiynau lluosog o ddelwedd ar wahanol gydraniad ar gyfer dyfeisiau gwahanol.
• Fideos hyblyg - Gellir gwneud fideos hefyd yn ymatebol trwy ddefnyddio'r priodwedd gwrthrych-ffit yn CSS sy'n caniatáu i ddatblygwyr nodi sut y dylai fideos raddfa o fewn eu cynwysyddion yn dibynnu ar eu maint.
Tag meta viewport
Mae'r tag meta viewport yn elfen HTML sy'n dweud wrth y porwr sut i addasu dimensiynau'r dudalen a'r raddfa i weddu i'r ddyfais sy'n cael ei defnyddio. Fe'i defnyddir i reoli sut mae tudalen we yn edrych ar wahanol ddyfeisiau, fel ffonau smart a thabledi. Gellir defnyddio'r tag meta porth gweld i osod lled tudalen we, ei raddio i fyny neu i lawr, a nodi a yw defnyddwyr yn cael chwyddo i mewn neu allan ai peidio. Gellir ei ddefnyddio hefyd i osod graddfa gychwynnol, graddfa uchaf, priodweddau y gellir eu graddio gan ddefnyddwyr, a mwy.
Sut mae gwneud i'm gwefan ffitio sgrin fy ffôn
I wneud gwefan ffitio sgrin ffôn yn HTML, gallwch ddefnyddio'r tag meta viewport. Mae'r tag hwn yn caniatáu ichi reoli sut mae'ch gwefan yn cael ei harddangos ar wahanol ddyfeisiau. Gallwch osod lled y porth gwylio i fod yn gyfartal â lled y ddyfais, fel y bydd eich gwefan yn addasu ei maint yn awtomatig i ffitio sgrin unrhyw ddyfais. Yn ogystal, gallwch hefyd ddefnyddio ymholiadau cyfryngau yn eich cod CSS i addasu ymhellach sut mae'ch gwefan yn edrych ar wahanol ddyfeisiau.
