Atlassian uses cookies to improve your browsing experience, perform analytics and research, and conduct advertising. Accept all cookies to indicate that you agree to our use of cookies on your device. Atlassian cookies and tracking notice, (opens new window)
Confluence
/
Mobile Optimization

Mobile Optimization

Sep 17, 2015

Um Webseiten für den mobilen Screen zu optimieren gibts einige Tipps & Tricks.

Zuerst sollte der viewport für mobile Geräte richtig eingestellt werden:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">

Weiter kann für Apple's iOS die Homescreen App konfiguriert und die Status Bar angepasst werden:

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

Im Hauptverzeichnis kann ein Icon "/apple-touch-icon.png" für die Verknüpfung abgelegt werden.

Beim Entwickeln für Mobile Geräte ist sehr hilfreich solche im Browser direkt zu emulieren.

Der Browser Chrome von Google hat eine solche Funktionalität schon eingebaut:

 

, multiple selections available,
For you
Web Development
  • Web Development
    Web Development
     This trigger is hidden
Results will update as you type.
  • A basic Barchart
  • Absolute Positioning
  • Code Editors
  • CSS
  • CSS Animations
  • CSV Transformation with node.js
  • d3.js
  • Desktop Source Compilers
  • Homebrew
  • Hosting Services
  • HTML CSS Javascript Resources
  • Interactive Visualization
  • jQuery
  • Mobile Optimization
  • node.js
  • Page-High Resizable Containers
  • Scrollable Visualization
  • Simple Layout Techniques
  • SVG
  • SVG Visualization
  • Terminal
  • UI Prototyping Tools
  • Version Control with GitHub
{"serverDuration": 15, "requestCorrelationId": "9cb46e86e0fc4ce79345b8ab83877fae"}