Phonegap / Cordova CSS Reset

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • Phonegap / Cordova CSS Reset

      Wer schon einmal von Grund auf eine App programmiert hat, stand schon vor diesem Problem: Obwohl man sich ein möglichst flexibles Layout ausgedacht hat, um entsprechend alle Geräte abzudecken, gelingt es nicht immer, alle Objekte entsprechend zu positionieren. Das Problem kann einerseits natürlich am jeweiligen Code liegen, andererseits hat jedes Gerät auch etwas "Eigenleben". Es werden [lexicon]margin[/lexicon] und [lexicon]padding[/lexicon] ergänzt, wo sie eigentlich nichts zu suchen haben.

      Um dem vorzubeugen bedient man sich eines einfachen Hilfsmittels, einem CSS Reset. Ein CSS Reset unterbindet das Hinzufügen jeglicher Abstände oder sonstigem. Dieser könnte beispielsweise so aussehen:

      *{
      [lexicon]border[/lexicon]: 0;
      [lexicon]margin[/lexicon]: 0;
      [lexicon]padding[/lexicon]: 0;
      -[lexicon]webkit-touch-callout[/lexicon]: none; /* prevent callout to copy image, etc when tap to hold */
      -[lexicon]webkit-text-size-adjust[/lexicon]: none; /* prevent webkit from resizing text to fit */
      -[lexicon]webkit-tap-highlight-color[/lexicon]: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
      -[lexicon]webkit-user-select[/lexicon]: none;
      [lexicon]box-sizing[/lexicon]: border-box;
      }

      RAW

      Quellcode

      1. border: 0;
      2. margin: 0;
      3. padding: 0;
      4. -webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
      5. -webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
      6. -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
      7. -webkit-user-select: none;
      8. box-sizing: border-box;