La ĉefa problemo rilate al HTML-ŝanĝo-vidportejo al saĝtelefona grandeco estas, ke ĝi povas kaŭzi, ke la retejo fariĝas neresponda aŭ malĝuste montriĝi. Ĉi tio estas ĉar kiam la vidpunkto estas ŝanĝita, la retejo eble ne estas optimumigita por pli malgranda ekrangrandeco kaj eble ne povas konvene malpligrandigi sian enhavon. Aldone, iuj funkcioj eble ne funkcias ĝuste sur pli malgranda ekrana grandeco, kiel navigaj menuoj aŭ interagaj elementoj.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1. Ĉi tiu linio de kodo estas meta-etikedo, kiu provizas informojn pri la HTML-dokumento al la retumilo.
2. La nomo-atributo estas agordita al "vidportejo", kiu diras al la retumilo, ke ĉi tiu etikedo enhavas informojn pri kiel la paĝo devas esti montrata en malsamaj aparatoj.
3. La enhava atributo estas agordita al "width=device-width, initial-scale=1.0", kiu diras al la retumilo, ke ĝi devas uzi la larĝon de la aparato kiel la larĝon de la paĝo kaj skali ĝin supren aŭ malsupren de tie se necese.
Enhavo
Respondema Reteja Dezajno
Respondema TTT-dezajno estas aliro al TTT-dezajno, kiu faras retpaĝojn bone bildigi en diversaj aparatoj kaj fenestroj aŭ ekrangrandoj. Ĝi uzas kombinaĵon de flekseblaj kradoj kaj aranĝoj, bildoj kaj inteligenta uzado de CSS-komunikiloj. Respondema retejoj estas dizajnitaj por provizi optimuman spektadsperton - facila legado kaj navigado kun minimumo de regrandigo, panoramo kaj movo - tra larĝa gamo de aparatoj (de labortablaj komputilaj ekranoj ĝis poŝtelefonoj).
En HTML, respondema dezajno povas esti atingita uzante la sekvajn teknikojn:
• Flekseblaj kradoj - Uzado de relativaj unuoj kiel procentoj aŭ ems anstataŭ fiks-larĝaj unuoj kiel pikseloj por aranĝaj elementoj permesas al la paĝo flekseble adaptiĝi al malsamaj ekrangrandoj.
• Amaskomunikilaraj demandoj - CSS3-komunikiloj-demandoj permesas al programistoj specifi malsamajn stilojn por malsamaj aparato-larĝoj. Ĉi tio permesas al la paĝa aranĝo alĝustigi laŭe depende de la aparato uzata.
• Respondema bildoj - Bildoj povas fariĝi respondemaj uzante la srcset-atributo en HTML5 kiu permesas programistojn specifi plurajn versiojn de bildo je malsamaj rezolucioj por malsamaj aparatoj.
• Flekseblaj filmetoj - Videoj ankaŭ povas esti respondemaj per uzado de la objekto-taŭga posedaĵo en CSS, kiu permesas al programistoj specifi kiel filmetoj devas skali ene de siaj ujoj depende de ilia grandeco.
Vidporto meta-etikedo
La meta-etikedo de vidpunkto estas HTML-elemento, kiu diras al la retumilo kiel ĝustigi la dimensiojn kaj skalojn de la paĝo por konveni al la uzata aparato. Ĝi estas uzata por kontroli kiel retpaĝo aspektas en malsamaj aparatoj, kiel inteligentaj telefonoj kaj tabeloj. La meta-etikedo de vidpunkto povas esti uzata por agordi la larĝon de retpaĝo, skali ĝin supren aŭ malsupren, kaj specifi ĉu aŭ ne uzantoj rajtas zomi aŭ malproksimigi. Ĝi ankaŭ povas esti uzata por agordi komencan skalon, maksimuman skalon, uzant-skaleblajn ecojn kaj pli.
Kiel mi igas mian retejon ĝustigi mian telefonan ekranon
Por ke retejo ĝustigu telefonan ekranon en HTML, vi povas uzi la meta-etikedon de vidpunkto. Ĉi tiu etikedo permesas vin kontroli kiel via retejo montriĝas sur malsamaj aparatoj. Vi povas agordi la larĝon de la vidfenestro egala al la larĝo de la aparato, tiel ke via retejo aŭtomate ĝustigos ĝian grandecon por konveni la ekranon de iu ajn aparato. Aldone, vi ankaŭ povas uzi amaskomunikilajn demandojn en via CSS-kodo por plue agordi kiel via retejo aspektas en malsamaj aparatoj.
