Sayfanızın mobil cihazdaki görünümünü ve performansını tahmin etmek için cihaz modunu kullanın.
Genel Bakış
Cihaz modu, Chrome Geliştirici Araçları'nda sizin için faydalı olacak ve mobil cihazları simüle eder. Bu özellikler şunlardır:
Sınırlamalar
Cihaz modunu, sayfanızın belirli bir platformda nasıl görüneceğini ve nasıl hissettiğini birinci düzey yaklaşım olarak düşünebilirsiniz mobil cihaz Cihaz modu ile kodunuzu bir mobil cihazda çalıştırmazsınız. Simüle edeceksiniz dizüstü veya masaüstü bilgisayarınızdan mobil kullanıcılara erişebilirsiniz.
Geliştirici Araçları'nın hiçbir zaman simüle edemeyeceği bazı mobil cihaz özellikleri vardır. Örneğin, Mobil CPU'ların mimarisi, dizüstü veya masaüstü CPU mimarisinden çok farklıdır. Şüpheye düştüğünüzde en iyi yöntem, sayfanızı bir mobil cihazda yayınlamaktır. Uzaktan Kumandayı Hata ayıklama mobil cihazda çalışır.
Cihaz araç çubuğunu aç
Cihaz araç çubuğunu açmak için aşağıdaki adımları uygulayın:
- Geliştirici Araçları'nı açın.
- Üst taraftaki işlem çubuğunda bulunan cihazlar 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 seçeneği Duyarlı değerine ayarlı şekilde görüntü alanında açılır. Boyutlar açılır menüsünü 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. Veya belirli değerler girin
koyduğunuzdan emin olun. Bu örnekte, genişlik 480
, yükseklik ise şu şekilde ayarlanmıştır:
415
.
Alternatif olarak, genişliği aşağıdakilerden birine göre ayarlamak için genişlik hazır ayarları çubuğunu kullanın:
Mobil S | M Mobil | Geniş mobil cihaz | Tablet | Dizüstü bilgisayar | Sol dizüstü bilgisayar | 4K |
---|---|---|---|---|---|---|
320 piksel | 375 piksel | 425 piksel | 768 piksel | 1024 piksel | 1.440 piksel | 2560 piksel |
Medya sorgularını göster
Görüntü alanınızın üzerinde medya sorgusu ayrılma noktalarını göstermek için Diğer seçenekler > Medya sorgularını göster.
Geliştirici Araçları, artık görüntü alanının üzerinde iki ek çubuk gösteriyor:
max-width
ayrılma noktası içeren mavi çubuk.min-width
ayrılma noktası içeren turuncu çubuk.
Görüntü alanının genişliğini, ayrılma noktasının tetikleneceği şekilde değiştirmek için ayrılma noktalarını tıklayın.
İlgili @media
bildirimini bulmak için ayrılma noktalarını sağ tıklayıp Kaynak kodunda göster'i seçin. Geliştirici Araçları, Düzenleyici'deki ilgili satırda bulunan Kaynaklar panelini açar.
Cihaz piksel oranını ayarla
Cihaz piksel oranı (DPR) donanım ekranındaki fiziksel pikseller ile mantıksal (CSS) pikseller arasındaki orandır. Başka bir deyişle DPR Chrome'a bir CSS pikseli çizmek için kaç ekran pikseli kullanılması gerektiğini bildirir. Chrome, HiDPI (İnç Başına Yüksek Nokta) ekranlarda çizim yaparken DPR değerini kullanır.
DPR değeri ayarlamak için:
Diğer seçenekler'i tıklayın > Cihaz piksel oranı ekleyin.
Görüntü alanının üst kısmındaki işlem çubuğunda, yeni DPR açılır menüsünden bir DPR değeri seçin.
Cihaz türünü ayarlama
Bir mobil cihazın veya masaüstü cihazın simülasyonunu yapmak için Cihaz Türü listesini kullanın.
En üstteki işlem çubuğunda listeyi göremiyorsanız Diğer seçenekler'i > Cihaz türü ekleyin.
Sonraki tabloda, seçenekler arasındaki farklar açıklanmaktadır. Oluşturma yöntemi şunları içerir:
Chrome'un sayfayı mobil veya masaüstü görüntü alanı olarak oluşturup oluşturmayacağı. İmleç simgesi
fareyle sayfanın üzerine geldiğinizde gördüğünüz bir imleci görebilirsiniz. Tetiklenen etkinlikler, sayfanın tetiklenip tetiklenmeyeceğini ifade eder
Sayfayla etkileşimde bulunduğunuzda touch
veya click
etkinlikleri.
Option | Oluşturma yöntemi | İmleç simgesi | Tetiklenen etkinlikler |
---|---|---|---|
Mobil | Mobil | Daire | dokun |
Mobil (dokunmatik) | Mobil | Normal | click |
Masaüstü | Masaüstü | Normal | click |
Masaüstü (dokunmatik) | Masaüstü | Daire | dokun |
Cihaza özgü mod
Belirli bir mobil cihazın boyutlarını simüle etmek için Boyutlar listesinden cihazı seçin.
Daha fazla bilgi edinmek için Özel mobil cihaz ekleme başlıklı makaleyi inceleyin.
Görüntü alanını yatay yöne döndürün
Görüntü alanını yatay yöne döndürmek için screen_rotation Döndür'ü tıklayın.
Cihaz araç çubuğunuz darsa Döndür düğmesinin kaybolacağını unutmayın.
Ayrıca, Yönü ayarlama konusuna da bakın.
Çift ekran modunu aç/kapat
Örneğin, Surface Duo gibi bazı cihazlarda iki ekran ve bunları kullanmak için iki yöntem vardır: biri veya her ikisi de etkin durumda.
Çift ve tek ekran arasında geçiş yapmak için araç çubuğunda devices_fold Çift ekran moduna geç'i tıklayın.
Cihazın duruşunu ayarlayın
Örneğin Asus Zenbook Fold gibi bazı cihazların katlanabilir ekranları vardır. Bu tür ekranların duruşu vardır: kesintisiz veya katlanmış. Sürekli duruş "düz" bir duruş anlamına gelir ekranın bölümleri arasında bir açı oluşturur.
Cihazın duruşunu ayarlamak için araç çubuğundaki ilgili açılır menüden Sürekli veya Katlanmış'ı seçin.
Cihaz çerçevesini göster
Nest Hub gibi belirli bir mobil cihazın boyutlarını simüle ederken Diğer seçenekler'i seçin > Cihaz çerçevesini göster, görüntü alanının etrafındaki fiziksel cihaz çerçevesini gösterir.
Bu örnekte Geliştirici Araçları, Nest Hub'ın çerçevesini göstermektedir.
Özel mobil cihaz ekleme
Özel cihaz eklemek için:
Cihaz listesini tıklayın ve ardından Düzenle'yi seçin.
Ayarlar ayarlarında > Cihazlar sekmesini tıklayın, desteklenen cihazlar listesinden bir cihaz seçin veya kendi cihazınızı eklemek için Özel cihaz ekle'yi tıklayın.
Kendinizinkini ekliyorsanız cihaz için bir ad, genişlik ve yükseklik girin, ardından Ekle'yi tıklayın.
Cihaz piksel oranı, kullanıcı aracısı dizesi ve cihaz türü alanları isteğe bağlıdır. Cihaz türü alanı, varsayılan olarak Mobil değerine ayarlanan listedir.
Görüntü alanına geri dönün, Boyutlar listesinden yeni eklenen cihazı seçin.
Cetvelleri göster
Diğer seçenekler'i tıklayın > Cetvelleri görmek için cetvelleri göster. Cetvellerin boyutlandırma birimi pikseldir.
Geliştirici Araçları, cetvelleri görüntü alanının üstünde ve solunda gösterir.
Görüntü alanının genişliğini ve yüksekliğini ayarlamak için belirli işaretlerdeki cetvelleri tıklayın.
Görüntü alanını yakınlaştır
Yakınlaştırmak veya uzaklaştırmak için Yakınlaştırma listesini kullanın.
Ekran görüntüsü al
Görüntü alanında gördüklerinizin ekran görüntüsünü almak için Diğer seçenekler > Ekran görüntüsü al.
Görüntü alanında görünmeyen içerik de dahil olmak üzere tüm sayfanın ekran görüntüsünü almak için aynı menüden Tam boyutlu ekran görüntüsü yakala'yı seçin.
Cihaza özel modda ekran görüntüsü yakalarken bir cihaz çerçevesi eklemek için önce Cihaz çerçevesini göster'i, ardından daha önce belirtildiği gibi Ekran görüntüsü yakala'yı tıklayın.
Geliştirici Araçları ile ekran görüntüsü almanın diğer yollarını öğrenmek için Geliştirici Araçları ile ekran görüntüsü yakalamanın 4 yolu başlıklı makaleyi inceleyin.
Ağı ve CPU'yu kısıtlama
Hem ağı hem de CPU'yu daraltmak için menüden Orta katman mobil veya Düşük teknoloji mobil'i seçin Gaz düğmesi listesi.
Orta katman mobil, hızlı 3G'yi simüle eder ve CPU'nuzu şundan 4 kat daha yavaş olacak şekilde daraltır: normal. Düşük özellikli mobil cihaz, yavaş 3G simülasyonu sunar ve CPU'nuzu normalden 6 kat daha yavaş kısıtlar. Sakla kısıtlamanın dizüstü veya masaüstü bilgisayarınızın normal kapasitesiyle bağlantılı olduğunu unutmayın.
Cihaz araç çubuğunuz darsa Kısıtlama listesinin gizleneceğini unutmayın.
Yalnızca CPU'yu daralt
Ağı değil yalnızca CPU'yu daraltmak için Performans paneline gidip Yakala'yı tıklayın Ayarlar ve Ardından CPU listesinden 4x yavaşlatma, 6x yavaşlatma veya 20x yavaşlama'yı seçin.
Yalnızca ağı kısıtlama
CPU'yu değil, yalnızca ağı daraltmak için Ağ paneline gidip Hızlı 3G'yi seçin veya Kısaltma listesinden yavaş 3G'yi seçin.
Alternatif olarak, Command Üst Karakter P (Mac) veya Control Üst Karakter P (Windows, Linux, ChromeOS) tuşlarına basarak Command
Menü'ye 3G
yazın ve Hızlı 3G kısıtlamasını etkinleştir veya Yavaş 3G kısıtlamasını etkinleştir'i seçin.
Ağ sınırlamayı Performans panelinden de ayarlayabilirsiniz. Capture Settings'i (Video Kayıt Ayarları) tıklayın. ve ardından seçin Ağ listesinden Hızlı 3G veya Yavaş 3G.
Sensör emülasyonu
Coğrafi konumu geçersiz kılmak, cihaz yönünü ve dokunmaya zorlamak ve boşta kalma durumunu simüle etmek için Sensörler panelini kullanın.
Sonraki bölümlerde, coğrafi konumun geçersiz kılınmasına ve cihaz yönünün nasıl ayarlanacağına dair hızlı bir genel bakış sunulmaktadır. Özelliklerin tam listesi için Cihaz sensörlerini simüle etme bölümüne bakın.
Coğrafi konumu geçersiz kıl
Coğrafi konumu geçersiz kılma kullanıcı arayüzünü açmak için Geliştirici Araçları'nı özelleştir ve kontrol et'i tıklayın. simgesine dokunun ve ardından Diğer araçlar > seçeneğini belirleyin. Sensörler.
Alternatif olarak, Command Üst Karakter P (Mac) veya Control Üst Karakter P (Windows, Linux, ChromeOS) tuşlarına basarak Command
Menü'ye Sensors
yazıp Sensörleri Göster'i seçin.
Konum listesindeki hazır ayarlardan birini seçin veya Diğer... seçeneğini belirleyerek koordinatlarını verebilir veya Konum mevcut değil'i seçerek sayfanızın, coğrafi konum bir hata durumunda.
Yönü ayarla
Yön kullanıcı arayüzünü açmak için Geliştirici Araçları'nı özelleştir ve kontrol et'i tıklayın. simgesine dokunun ve ardından Diğer araçlar > seçeneğini belirleyin. Sensörler.
Alternatif olarak, Command Üst Karakter P (Mac) veya Control Üst Karakter P (Windows, Linux, ChromeOS) tuşlarına basarak Command
Menü'ye Sensors
yazıp Sensörleri Göster'i seçin.
Yön listesindeki hazır ayarlardan birini seçin veya mevcut yönünüzü ayarlamak için Özel yön'ü seçin. alfa, beta ve gama değerlerine sahip olacaktır.