Sayfanızın mobil cihazda nasıl göründüğünü ve performans gösterdiğini tahmin etmek için cihaz modunu kullanın.
Genel Bakış
Cihaz modu, Chrome Geliştirici Araçları'nda mobil cihazları simüle etmenize yardımcı olan bir özellikler koleksiyonunun adıdır. Bu özellikler şunlardır:
Sınırlamalar
Cihaz modunu, sayfanızın mobil cihazda nasıl göründüğüne ve nasıl bir deneyim sunduğuna dair birinci dereceden bir yaklaşım olarak düşünebilirsiniz. Cihaz modunda kodunuzu mobil cihazda çalıştırmazsınız. Mobil kullanıcı deneyimini dizüstü veya masaüstü bilgisayarınızda simüle edersiniz.
Mobil cihazların bazı yönlerini DevTools hiçbir zaman simüle edemez. Örneğin, mobil CPU'ların mimarisi, dizüstü veya masaüstü CPU'ların mimarisinden çok farklıdır. Emin olmadığınızda en iyi seçenek, sayfanızı mobil cihazda çalıştırmaktır. Bir sayfanın kodu mobil cihazda çalışırken dizüstü veya masaüstü bilgisayarınızdan bu kodu görüntülemek, değiştirmek, hata ayıklamak ve profillemek için uzaktan hata ayıklamayı kullanın.
Cihaz araç çubuğunu açma
Cihaz araç çubuğunu açmak için aşağıdaki adımları uygulayın:
- Geliştirici Araçları'nı açın.
- Üstteki işlem çubuğunda bulunan Cihaz araç çubuğunu aç/kapat'ı tıklayın.
Mobil görüntü alanını simüle etme
Varsayılan olarak cihaz araç çubuğu, Boyutlar'ın Duyarlı olarak ayarlandığı görüntü alanında açılır. Boyutlar açılır listesini kullanarak belirli bir mobil cihazın boyutlarını simüle edebilirsiniz.
Duyarlı Görüntü Alanı Modu
Görüntü alanını istediğiniz boyutlara göre yeniden boyutlandırmak için tutma yerlerini sürükleyin. Alternatif olarak, genişlik ve yükseklik kutularına belirli değerler girebilirsiniz. Bu örnekte genişlik 480, yükseklik ise 415 olarak ayarlanmıştır.
Alternatif olarak, genişliği aşağıdaki seçeneklerden birini tıklayarak ayarlamak için genişlik hazır ayarları çubuğunu kullanın:
| Mobile S | Mobile M | Mobile L | Tablet | Dizüstü bilgisayar | Geniş dizüstü bilgisayar | 4K |
|---|---|---|---|---|---|---|
| 320 piksel | 375 piksel | 425 piksel |