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)
- browserstack.com/responsive (zdarma)
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

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

Opera Mobile Emulator (Mac, Linux, Windows)
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

Tomáš Daněk