Simulovat Mobilní Zařízení s Zařízení Režimu v Chrome DevTools

Použití Zařízení v Režimu přiblížit, jak vypadá vaše stránky a provádí na mobilním zařízení.

režim zařízení je název pro volnou sbírku funkcí v Chrome DevTools, kterépomáhá simulovat mobilní zařízení., Mezi tyto funkce patří:

• Simulující mobilní výřez
• Omezení sítě
• Škrcení CPU
• Simulaci geolocation
• Nastavení orientace

Omezení

Přemýšlejte o Režimu Zařízení jako prvního řádu, aproximace, jak yourpage vypadá a cítí se na mobilním zařízení. V režimu zařízení ve skutečnosti nespustíte kódna mobilním zařízení. Simulujete mobilní uživatelský zážitek z vašeho notebooku nebo počítače.

existují některé aspekty mobilních zařízení, které DevTools nikdy nebudou moci simulovat., Forexample, Architektura mobilních procesorů je velmi odlišná od architektury stolních procesorů laptopor. Pokud máte pochybnosti, nejlepší je skutečně spustit stránku na mobilním zařízení. Pomocí vzdáleného ladění můžete prohlížet, měnit,ladit a profilovat kód stránky z notebooku nebo počítače, zatímco ve skutečnosti běží na mobilním zařízení.

Simulovat mobilní výřez

Klepněte na tlačítko Přepnout Zařízení Toolbar otevřít UI povolující simulovat mobilní výřez.

ve výchozím nastavení se panel nástrojů zařízení otevře v režimu responzivního výřezu.

režim responzivního výřezu

přetáhněte rukojeti a změňte velikost výřezu na libovolné rozměry, které potřebujete. Nebo zadejte konkrétní hodnotyv krabicích šířky a výšky. Na obrázku 2 je šířka nastavena na 628 a výška je nastavena na662.

Zobrazit dotazy médií

ukázat media query zarážky nad výřez, klikněte na Další možnosti a pak vyberte Zobrazit mediaqueries.

kliknutím na bod zlomu změníte šířku výřezu tak, aby se spustil bod zlomu.

Nastavte typ zařízení

použijte seznam typů zařízení k simulaci mobilního zařízení nebo stolního zařízení.

níže uvedená tabulka popisuje rozdíly mezi možnostmi. Způsob vykresleníodkazuje na to, zda Chrome vykresluje stránku jako mobilní nebo stolní výřez. Ikona kurzoruodkazuje na to, jaký typ kurzoru vidíte, když umístíte kurzor na stránku., Akce vystřelil refersto, zda je stránka požáry touch nebo click akce při interakci se stránkou.,id=“b8e8c2fed7″>

Option Rendering method Cursor icon Events fired Mobile Mobile Circle touch

Mobile (no touch) Mobile Normal click Desktop Desktop Normal click Desktop (touch) Desktop Circle touch

Mobile Device Viewport Mode

To simulate the dimensions of a specific mobile device, select the device from the Device list.,

Rotate the viewport to landscape orientation

Click Rotate to rotate the viewport to landscape orientation.

Note that the Rotate button disappears if your Device Toolbar is narrow.

Viz také nastavit orientaci.

Zobrazit rámeček zařízení

při simulaci rozměrů konkrétního mobilního zařízení, jako je iPhone 6, otevřete další možnostia poté vyberte Zobrazit rámeček zařízení a zobrazte fyzický rámeček zařízení kolem výřezu.

Přidat vlastní mobilní zařízení

Chcete-li přidat vlastní zařízení:

1. Klepněte na Zařízení v seznamu a pak vyberte Upravit.

   

2. klikněte na Přidat vlastní zařízení.

3. zadejte název, šířku a výšku zařízení. Thedevice pixel ratio, User agent string, a typ zařízení Pole jsou volitelné. Pole typu zařízení je seznam, kterýje ve výchozím nastavení nastaven na mobilní telefon.,

   

Show rulers

Click More options and then select Show rulers to see rulers above and to the leftof your viewport. The sizing unit of the rulers is pixels.

Zoom výřezu

použijte seznam zoomu pro přiblížení nebo oddálení.

Škrticí klapky sítě a CPU

škrticí klapky sítě a CPU, zvolte Mid-tier mobilní nebo Low-end mobilefrom Škrticí klapky seznamu.

Mid-tier mobilní simuluje rychlý 3G a throttles CPU, takže to je 4 timesslower, než je obvyklé. Low-end mobile simuluje pomalý 3G a škrticí klapky CPU 6 krát pomalejší, než je obvyklé.Mějte na paměti, že škrcení je vzhledem k normální schopnosti vašeho notebooku nebo počítače.

Všimněte si, že seznam škrticí klapky bude skrytý, pokud je panel nástrojů zařízení úzký.

Plyn CPU pouze

plyn CPU a ne pouze sítě, přejděte na Výkon panelu, clickCapture Nastavení , a pak select4x zpomalení nebo 6x zpomalení z CPU seznamu.

Plyn pouze síť

plyn pouze síť a ne CPU, jít panel Síť a selectFast 3G nebo Pomalé 3G od Škrticí klapky seznamu.,

Nebo stiskněte Command+Shift+P (Mac) nebo Control+Shift+P (Windows, Linux, Chrome OS) openthe Příkaz Menu, type 3G, a vyberte možnost Povolit rychlý 3G škrcení orEnable pomalé 3G pásma.

můžete také nastavit škrcení sítě z panelu výkonu., Clickcapture Settings a pakvyberte rychle 3G nebo pomalu 3G ze seznamu sítě.

Přepsat geolocation

otevřít geolokace přepsání uživatelského ROZHRANÍ klepněte na tlačítko Přizpůsobit a ovládat DevTools a pak selectMore nástroje > Senzory.

Vyberte jednu z předvoleb z Geolocation seznamu nebo zvolte Vlastní locationto zadat vlastní souřadnice, nebo vybrat Umístění k dispozici vyzkoušet, jak yourpage chová, když geolokace je v chybovém stavu.

Set orientation

To open the orientation UI click Customize and control DevTools and then selectMore tools > Sensors.

vyberte jednu z předvoleb ze seznamu orientace nebo vyberte Vlastní orientacizastavit vlastní hodnoty alfa, beta a gama.

Zpětná vazba