Mobilní zařízení

Vzhled webových stránek je vhodné otestovat i v mobilních zařízeních. Pro testy je možné využít např.:

  • vanamco.com/ghostlab (49 $) – synchronized testing for web and mobile enlightened
  • crossbrowsertesting.com (30 $/mo) – cross browser test your website in dozens of browsers with instant results
  • browserstack.com (39 $/mo) – Live, Web-Based Browser Testing
    • browserstack.com/screenshots (zdarma) yes
    • browserstack.com/responsive (zdarma) yes
  • testiphone.com (mezerník přepíná mezi horizontálním a vertikálním zobrazením viz Tips and Options na stránce Test iPhone)
  • mattkersley.com/responsive – Responsive Design Testing
  • responsinator.com – rychlý náhled (iPhone, Crappy Android, Samsung Galaxy, iPad, Kindle)
  • browsershots.org – náhledy
  • Google Chrome
    • Plugin Window Resizer
  • Firefox
    • Web Developer, Velikost Okna, Zobrazit responzivní layouty
    • Plugin Web Developer Toolbar Button (pložka menu: Responzivní design) - nemění velikost okna prohlížeče yes

Retina displej

Možnosti jak testovat "Retina web ready" bez Retina displeje:

  • Opera Mobile Emulator (Mac, Linux, Windows) yes
  • Součástí aplikace XCode je nástroj Quartz Debug a iOS Simulator (Mac)
  • Firefox
    • V "about:config" najděte "layout.css.devPixelsPerPx" a změnte na hodnotu "1" (normal), "2" (retina) atd.
      • výhoda: reaguje na Media Queries
  • Do CSS přidejte (Safari, Chrome, Firefox, IE???)
    • body {
        zoom: 200%;
        -moz-transform: scale(2);
        -moz-transform-origin: 0 0;
      }
    • nevýhoda: v Media Queries je nutné dočasně přepnout "pixel ratio" na 1
  • Použijte JavaScript Web Retina Emulator
    • nevýhoda: nespouští Media Queries