Html

ciljna gostotadpi

Target Densitydpi



Gostota slikovnih pik zaslona je določena z ločljivostjo zaslona, ​​ki je običajno opredeljena kot število pik (dpi) na palec. Android podpira gostoto slikovnih pik treh zaslonov: nizka gostota slikovnih pik, gostota slikovnih pik in visoka gostota slikovnih pik. Nizka gostota slikovnih pik zaslona manj na slikovnih pik na palec in večja na zaslonu z visoko gostoto slikovnih pik. Privzeti zaslon brskalnika Android in WebView je gostota slikovnih pik.

Sledi obseg lastnosti ciljne gostotedpi



  • device-dpi - dpi z uporabo prvotnega ciljnega dp naprave. Privzeta povečava ne bo prišlo.
  • high-dpi - hdpi uporabi kot ciljni dpi. Naprava za zmanjševanje pik srednje gostote in nizke gostote.
  • medium-dpi - mdpi uporabi kot ciljni dpi. Ojačevalna naprava z visoko gostoto slikovnih pik, pri čemer se gostota slikovnih pik naprave ustrezno zmanjša. To je privzeta ciljna gostota.
  • low-dpi - mdpi uporabi kot ciljni dpi. Naprave s povprečno gostoto slikovnih pik in visoko gostoto slikovnih pik, ki ustrezajo ojačitvi.
  • - Podaja določeno vrednost, saj mora biti ciljni dpi dpi tega obsega vrednosti med 70–400.

Na splošno lahko prilagodljivo postavitev dosežemo na naslednje načine:



  • Uporaba postavitve pretoka (fluidna mreža)
  • Glede na velikost zaslona izberite drugo obremenitev CSS
  • Uporabite @media pravila CSS

Tukaj je opisano, kako v WebApp (ali mobilni brskalnik) vstaviti prilagodljive strani s fiksno širino. Na primer, zasnovali smo manjšo širino strani 640px, ki se v glavnem uporablja v mobilnih telefonih za ogled, vendar je ločljivosti zaslona telefona preveč, da bi se prilagodili vsakemu telefonu. Kako naj to storim?



Najprej v glavo dodamo:

<head> <meta name='viewport' content='width=device-width, user-scalable=no'> head>

Tu predstavlja širino vidnega polja, ki ustreza širini zaslona naprave, in onemogoči povečavo. Vključuje dva koncepta:

  • element prikaza
  • devicePixelRatio: fizične slikovne pike in neodvisne naprave od razmerja slikovnih pik (neodvisne od naprave (slikovne pike)).

Ker mobilni telefoni iphone in več kot telefoni Android 4.0 podpirajo širino za spreminjanje strani za spreminjanje primerov lestvice, smo tudi mi širino lahko določite kot širino zasnove strani , Na ta način je vaša stran polna prikaza in celozaslonskega prikaza brez spreminjanja velikosti. Npr .:



<meta name='viewport' content='px, user-scalable=no'>

Toda za naslednji telefon android 4.0 ne podpira nastavitev širine vidnega polja, ampak mi Za doseganje istega namena se lahko parametri Androida predložijo drugi ciljni gostoti dpi , Formula ciljne gostote dpi, kot sledi:

target-densitydpi = UI-width / device-width * window.devicePixelRatio * 160 // UI-width: WebApp layout width // device-width: screen resolution width

potem, Končna rešitev kot sledi:

<meta name='viewport' content='target-densitydpi=device-dpi, px, user-scalable=no'> $(function () { var DEFAULT_WIDTH = 640, // default width of the page ua = navigator.userAgent.toLowerCase(), // Get the browser information based on the user agent information deviceWidth = window.screen.width, // the width of the device devicePixelRatio = window.devicePixelRatio || 1, Individual pixels and pixel ratio // physical devices, default 1 targetDensitydpi // Android4.0 the phone does not support width viewport, we need to set the target-densitydpi if (ua.indexOf('android') !== -1 && parseFloat(ua.slice(ua.indexOf('android')+8)) <4) { targetDensitydpi = DEFAULT_WIDTH / deviceWidth * devicePixelRatio * 160 $('meta[name='viewport']').attr('content', 'target-densitydpi=' + targetDensitydpi + ', width=device-width, user-scalable=no') } // TODO: Other phones require special handling below })

Težave ：

  • Trenutno preizkušeni samo mobilni telefon android in ios / ipad
  • Pod android ni mogoče zaznati z različico firefox android, Firefox lahko prezrete