Cihaz moduyla mobil cihazları simüle edin

Sofia Emelianova
Sofia Emelianova

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:

  1. Geliştirici Araçları'nı açın.
  2. Üst taraftaki işlem çubuğunda bulunan cihazlar Cihaz araç çubuğunu aç/kapat'ı tıklayın.

Cihaz araç çubuğu açma/kapatma düğmesi

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.

Cihaz araç çubuğu.

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.

Duyarlı Görünüm Modu'ndayken görüntü alanının boyutlarını değiştirmek için kullanılan tutma yerleri.

Alternatif olarak, genişliği aşağıdakilerden birine göre ayarlamak için genişlik hazır ayarları çubuğunu kullanın:

Genişlik hazır ayarları çubuğu.

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. Diğer seçenekler > Medya sorgularını göster.

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.

Görüntü alanının genişliğini 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.

Kaynak kodu açılır menüsünde göster.

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:

  1. Diğer seçenekler'i Diğer seçenekler. tıklayın > Cihaz piksel oranı ekleyin.

    Cihaz piksel oranı ekleyin.

  2. 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.

    DPR değerini ayarlama.

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.

Cihaz Türü listesi.

En üstteki işlem çubuğunda listeyi göremiyorsanız Diğer seçenekler'i Diğer seçenekler. > 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.

OptionOluşturma yöntemiİmleç simgesiTetiklenen etkinlikler
MobilMobilDairedokun
Mobil (dokunmatik)MobilNormalclick
MasaüstüMasaüstüNormalclick
Masaüstü (dokunmatik)MasaüstüDairedokun

Cihaza özgü mod

Belirli bir mobil cihazın boyutlarını simüle etmek için Boyutlar listesinden cihazı seçin.

Boyutlar listesi.

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.

Yatay yön.

Cihaz araç çubuğunuz darsa Döndür Döndür. düğmesinin kaybolacağını unutmayın.

Cihaz araç çubuğu.

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.

Çift ekran modu açıldı.

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.

Duruş katlanmış olarak ayarlandı.

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 Diğer seçenekler. > Cihaz çerçevesini göster, görüntü alanının etrafındaki fiziksel cihaz çerçevesini gösterir.

Cihaz çerçevesini göster.

Bu örnekte Geliştirici Araçları, Nest Hub'ın çerçevesini göstermektedir.

Nest Hub'ın cihaz çerçevesi.

Özel mobil cihaz ekleme

Özel cihaz eklemek için:

  1. Cihaz listesini tıklayın ve ardından Düzenle'yi seçin.

    Düzenle'yi tıklayın.

  2. 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.

  3. Kendinizinkini ekliyorsanız cihaz için bir ad, genişlik ve yükseklik girin, ardından Ekle'yi tıklayın.

    Özel cihaz oluşturma.

    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.

  4. Görüntü alanına geri dönün, Boyutlar listesinden yeni eklenen cihazı seçin.

Cetvelleri göster

Diğer seçenekler'i Diğer seçenekler. tıklayın > Cetvelleri görmek için cetvelleri göster. Cetvellerin boyutlandırma birimi pikseldir.

Cetvelleri göster.

Geliştirici Araçları, cetvelleri görüntü alanının üstünde ve solunda gösterir.

Görüntü alanının üstünde ve solunda bulunan cetveller.

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.

Yakınlaştır'ı seçin.

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. Diğer seçenekler > Ekran görüntüsü al.

Diğer seçenekler menüsündeki Ekran görüntüsü al seçeneği.

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.

Cihaz çerçevesi eklenmiş olarak ekran görüntüsü alınıyor.

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.

Kısıtlama 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 Yakalama ayarları. ve Ardından CPU listesinden 4x yavaşlatma, 6x yavaşlatma veya 20x yavaşlama'yı seçin.

CPU listesi.

Yalnızca ağı kısıtlama

CPU'yu değil, yalnızca ağı daraltmak için paneline gidip Hızlı 3G'yi seçin veya Kısaltma listesinden yavaş 3G'yi seçin.

Kısıtlama listesi.

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.

Komut Menüsü.

Ağ sınırlamayı Performans panelinden de ayarlayabilirsiniz. Capture Settings'i (Video Kayıt Ayarları) tıklayın. Yakalama ayarları. ve ardından seçin listesinden Hızlı 3G veya Yavaş 3G.

Performans panelinden ağ sınırlama ayarlama.

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. Geliştirici Araçları'nı özelleştirin ve kontrol edin. simgesine dokunun ve ardından Diğer araçlar > seçeneğini belirleyin. Sensörler.

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.

Sensörleri göster

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.

Coğrafi konum

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. Geliştirici Araçları'nı özelleştirin ve kontrol edin. simgesine dokunun ve ardından Diğer araçlar > seçeneğini belirleyin. Sensörler.

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.

Sensörleri göster

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.

Yön