Embedded Files
La crearea interfeței de utilizator pentru o aplicație web ar trebui să fie luată în considerare o opțiune de a scala întreaga pagină Web și de a schimba orientarea unui dispozitiv mobil. Se recomandă prevenirea scalării și menținerea constantă a aspectului unei pagini web pentru a evita posibilele probleme. Acest lucru poate fi obținut prin adăugarea următorului meta-tag în antetul paginii:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">Uneori este posibil să fie necesar să blocați un dispozitiv mobil într-o anumită orientare, mai ales atunci când nu doriți să realizați variante de tip landscape (peisaj, pe lățime) și portrait (portret, pe înălțime). Deoarece API nativ este un experiment experimental și nu este răspândit, acest lucru ar putea fi mai ușor de făcut folosind regulile CSS.
Pentru a menține orientarea numai în modul landscape, se poate seta rotirea elementului <html> la 90 de grade în modul portret:
@media (orientation : portrait) {html {position: absolute;width: 100vh;height: 100vw;overflow: hidden;-moz-transform: rotate(90deg);-ms-transform: rotate(90deg);-webkit-transform: rotate(90deg);transform: rotate(90deg);-moz-transform-origin: top left;-ms-transform-origin: top left;-webkit-transform-origin: top left;transform-origin: top left;left: 100%;}}În mod similar, regula CSS numai pentru modul portret ar trebui să arate astfel:
@media (orientation : landscape) {html {position: absolute;width: 100vh;height: 100vw;overflow: hidden;-moz-transform: rotate(-90deg);-ms-transform: rotate(-90deg);-webkit-transform: rotate(-90deg);transform: rotate(-90deg);-moz-transform-origin: top left;-ms-transform-origin: top left;-webkit-transform-origin: top left;transform-origin: top left;top: 100%;}}Google Sites
Report abuse