Tässä blogissa kerrotaan, kuinka näkymän sisällönkuvauskenttää käytetään responsiiviseen web-suunnitteluun HTML:ssä:
Mikä on Viewport-sisällönkuvauskenttä?
' näkymä ” on tärkein tunniste responsiivisen ulkoasun luomiseen ohjaamalla sitä, miten sisältö näkyy erikokoisilla näytöillä. Tämä tunniste on sijoitettu '
Viewportin sisällönkuvauskentän eri attribuutit
Näkymän sisällönkuvauskentässä on seuraavat attribuutit, jotka voidaan asettaa arvoksi sisältö 'määrite:
'leveys' -määrite
' leveys ” attribuutti määrittää verkkosivun näkyvän alueen sisällölle pystysuunnassa. Sen sisällönkuvauskenttä näyttää tältä:
< meta nimi = 'näkymä' sisältö = 'leveys = laitteen leveys' >
'korkeus' -määrite
' korkeus ” attribuutti määrittää verkkosivun pystypituuden varmistaakseen, että näkymän korkeus vastaa näytön korkeutta. Sen sisällönkuvauskenttä näyttää tältä:
< meta nimi = 'näkymä' sisältö = 'korkeus = 400' >
'Initial-scale' -määrite
' Alkuperäinen mittakaava ” -attribuutti varmistaa, että verkkosivu näytetään sopivalla zoomaustasolla ensimmäisen latauksen yhteydessä. Käy esimerkiksi alla olevassa koodissa:
< meta nimi = 'näkymä' sisältö = 'leveys = laitteen leveys, alkumittakaava = 1,0' >'maksimimittakaava'-attribuutti
' maksimimittakaavassa ” attribuutti määrittää verkkosivun suurimman zoomaustason asetteluongelmien estämiseksi:
< meta nimi = 'näkymä' sisältö = 'leveys = laitteen leveys, maksimimittakaava = 1,0' >
'minimimittakaava'-attribuutti
' minimimittakaavassa ' käytetään estämään käyttäjää loitomasta liikaa määrittämällä pienimmän loitonnan asteikkotason:
< meta nimi = 'näkymä' sisältö = 'leveys = laitteen leveys, vähimmäismittakaava = 0,5' >'käyttäjän skaalautuva' attribuutti
' käyttäjän skaalautuva '-attribuutti sallii tai ei salli käyttäjän saada verkkosivun näyttöä loitomaan tai lähentämään asettamalla arvoksi ' Ei ' tai ' Joo ”. Sisällönkuvauskenttä, jonka avulla käyttäjä voi lähentää tai loitontaa, on:
< meta nimi = 'näkymä' sisältö = 'width=device-width, user-scalable=yes' >Kuinka käyttää Viewport-sisällönkuvauskenttää responsiiviseen web-suunnitteluun HTML:ssä?
Ymmärtääksesi paremmin näkymän sisällönkuvauskentän käyttöä responsiivisessa web-suunnittelussa. Käydään läpi esimerkki:
Oletetaan '' Yllä olevan koodinpätkän kokoamisen jälkeen verkkosivu näyttää tältä: Tulos näyttää, että sisältö ei ole responsiivinen, koska se ei näy täydellisesti pienissä laitteissa. Jotta se olisi reagoiva, lisää ' näkymä 'sisällönkuvauskenttä: Koodin päivityksen jälkeen verkkosivu näyttää tältä eri näytöissä: Lopullinen tulos osoittaa, että verkkosivu on nyt responsiivinen sen jälkeen, kun sisällönkuvauskenttä on lisätty ' Viewport-sisällönkuvauskentän avulla kehittäjä voi antaa selaimelle joukon ohjeita, jotka määrittävät, miten verkkosivu näytetään eri näyttökokoisilla laitteilla. Sisällönkuvauskenttä sijoitetaan ' 'tunniste: < div >
< s >
< b >Linuxhintin tuottamana, jotta ymmärrät paremmin näkymän sisällönkuvauskentän avaamalla verkkosivu eri näytöillä koko laitteet.< / b >
< / s >
< img src = '../bg.jpg' kaikki = 'Hakkeri' leveys = '460' korkeus = '3. 4. 5' >
< s tyyli = 'täyte: 5px' >
< i >Liity Linuxhint-tiimiin < / i >
Linuxhintin tuottamana, jotta ymmärrät paremmin näkymän sisällönkuvauskentän avaamalla verkkosivu eri näytöillä koko Linuxhintillä, jotta ymmärrät paremmin näkymän sisällönkuvauskentän avaamalla verkkosivu eri näytöillä koko Linuxhintillä, jotta ymmärrät paremmin näkymän sisällönkuvauskentän avaamalla verkkosivu eri näytöillä koko Linuxhintillä, jotta ymmärrät paremmin näkymän sisällönkuvauskentän avaamalla verkkosivu eri näytöillä koko laitteet.
< / s >
< / div >
< meta nimi = 'näkymä' sisältö = 'leveys = laitteen leveys, alkumittakaava = 1,0' / >
< / pää >
Johtopäätös