# 044: Reagoiva twiitti todellisessa emulaattorissa - CSS-temppuja

Anonim

Pöytäselaimen puristaminen hyvin kapeaksi voi antaa sinulle epämääräisen kuvan reagoivan suunnittelun toiminnasta, mutta se ei ole tarkka esitys todellisesta pienen näytön laitteesta. Suunnittelemme täällä todelliset pienen näytön laitteet, ei muut utelias suunnittelijat, jotka puristavat selaimiaan =).

Tässä kuvaruudussa avaamme iOS-simulaattorin (mukana ilmaiseksi XCode Macissa) ja teemme joitain suunnittelun mukautuksia sen perusteella, mitä näemme siellä. Kokemukseni mukaan simulaattori on hyvin tarkka, mitä näet todellisessa laitteessa. Olen myös nähnyt eroja - esimerkiksi muistin käyttöä. Heti tämän verkkosivuston käynnistämisen jälkeen näin kaatuvan mobiililaitteissa - eikä sitä tapahtunut simulaattorissa.

Yksi asia, jonka teemme, on poistaa 3D-pinottu paperitehoste kapeimmasta mediakyselystä. Selvitämme myös, että otsikossa oleva mainos aiheuttaa jonkin verran vaakasuuntaista vieritystä matkapuhelimella, mikä ei ole toivottavaa, kun lähestymme mobiiliasettelua. Onneksi pystyimme jäljittämään sen heti, mutta joskus nämä asiat ovat vaikeasti jäljitettävissä, ja piilotat vain overflow-xkehon, jonka lopulta teemme täällä.

Säädämme joitain kirjasinkokoja myös pienemmälle näytölle.