Cihaz moduyla mobil cihazları simüle edin

Sofia Emelianova
Sofia Emelianova

Sayfanızın mobil cihazda nasıl göründüğünü ve nasıl performans gösterdiğini tahmin etmek için cihaz modunu kullanın.

Cihaz modu, mobil cihazları simüle etmenize yardımcı olan Chrome Geliştirici Araçları'ndaki bir dizi özelliğin adıdır. Bu özellikler şunlardır:

Sınırlamalar

Cihaz modunu, sayfanızın mobil cihazdaki görünümünün ve hissinin birinci düzey bir tahmini olarak düşünebilirsiniz. Cihaz moduyla, kodunuzu bir mobil cihazda çalıştırmazsınız. Dizüstü veya masaüstü bilgisayarınızdan mobil kullanıcı deneyimini simüle edersiniz.

Geliştirici Araçları'nın, mobil cihazlarda hiçbir zaman simüle edemeyeceği bazı yönleri vardır. Örneğin, mobil CPU'ların mimarisi, dizüstü veya masaüstü CPU'ların mimarisinden çok farklıdır. Şüpheye düştüğünüzde, yapacağınız en iyi şey sayfanızı bir mobil cihazda yayınlamaktır. Bir sayfa mobil cihazda çalışırken dizüstü veya masaüstü bilgisayarınızdan bir sayfanın kodunu görüntülemek, değiştirmek, hata ayıklamak ve profil oluşturmak için Uzaktan Hata Ayıklama'yı kullanın.

Mobil görüntü alanı simüle etme

Mobil görüntü alanını simüle etmenize olanak tanıyan bir araç çubuğunu açmak için cihazlar Cihaz araç çubuğunu aç/kapat'ı tıklayın.

Cihaz araç çubuğu.

Varsayılan olarak, cihaz araç çubuğu Boyutlar Duyarlı değerine ayarlanmış görüntü alanında açılır.

Duyarlı Görüntü Alanı Modu

Görüntü alanını istediğiniz boyutlara yeniden boyutlandırmak için tutma yerlerini sürükleyin. Veya genişlik ve yükseklik kutularına belirli değerler girin. Bu örnekte genişlik 480, yükseklik ise 415 olarak ayarlanmıştır.

Duyarlı Görüntü Alanı Modu'ndayken görüntü alanı boyutlarını değiştirmeye yönelik tutma yerleri.

Alternatif olarak, genişliği aşağıdakilerden birini tıklayarak ayarlamak için genişlik hazır ayarları çubuğunu kullanın:

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

Mobil S Mobil M Mobil L Tablet Dizüstü Bilgisayar Büyük dizüstü bilgisayar 4K
320 piksel 375 piksel 425 piksel 768 piksel 1024 piksel 1.440 piksel 2.560 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'i tıklayın.

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ı olan mavi çubuk.
  • min-width ayrılma noktası olan turuncu çubuk.

Kesme noktasının tetikleneceği şekilde görüntü alanının genişliğini 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ın ve Kaynak kodunda göster'i seçin. Geliştirici Araçları, Düzenleyici'de ilgili satırda 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ılacağını bildirir. Chrome, HiDPI (İnç Başına Yüksek Nokta) ekranlarla ilgili çizim yaparken DPR değerini kullanır.

Bir DPR değeri ayarlamak için:

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

    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ğeri ayarlanıyor.

Cihaz türünü ayarlama

Bir mobil cihaz veya masaüstü cihazı simüle etmek için Cihaz Türü listesini kullanın.

Cihaz Türü listesi.

Üstteki işlem çubuğunda listeyi görmüyorsanız Diğer seçenekler Diğer seçenekler. > Cihaz türü ekle'yi seçin.

Sonraki tabloda, seçenekler arasındaki farklar açıklanmaktadır. Oluşturma yöntemi, Chrome'un sayfayı mobil veya masaüstü görüntü alanı olarak oluşturup oluşturmadığını belirtir. İmleç simgesi, fareyle sayfanın üzerine geldiğinizde gördüğünüz imleç türünü ifade eder. Tetiklenen etkinlikler, sayfayla etkileşimde bulunduğunuzda sayfanın touch veya click etkinliklerini tetiklediğini ifade eder.

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

Cihaza özel 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ı makaleye bakın.

Görüntü alanını yatay yöne döndürme

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 dar olursa Döndür Döndür. düğmesinin kaybolacağını unutmayın.

Cihaz araç çubuğu.

Yönü ayarlama konusuna da bakın.

Çift ekran modunu aç/kapat

Örneğin, Surface Duo'da iki ekran kullanılabilir. Bunları iki farklı şekilde kullanabilirsiniz: Ekranlardan biri veya her ikisi etkin olacak şekilde.

Çift ve tek ekran arasında geçiş yapmak için araç çubuğunda devices_fold Çift ekran modunu aç/kapat seçeneğini tıklayın.

Çift ekran modu açıldı.

Cihazın duruşunu ayarlayın

Asus Zenbook Fold gibi bazı cihazların ekranı katlanabilir. Bu tür ekranların duruşu vardır: kesintisiz veya katlanmış. Kesintisiz duruş "düz" pozisyonu belirtir ve katlanmış ekranın bölümleri arasında bir açı oluşturur.

Cihazın durumunu 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 fiziksel cihaz çerçevesini görüntü alanında göstermek için Diğer seçenekler Diğer seçenekler. > Cihaz çerçevesini göster'i seçin.

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, ardından Düzenle'yi seçin.

    Düzenle'yi tıklayın.

  2. Ayarlar > Cihazlar sekmesinde, 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 girip Ekle'yi tıklayın.

    Özel cihaz oluşturuluyor.

    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üp Boyutlar listesinden yeni eklenen cihazı seçin.

Cetvelleri göster

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

Cetvelleri göster'i tıklayın.

Geliştirici Araçları, görüntü alanının üst ve sol tarafında cetvelleri 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ırma

Yakınlaştırmak veya uzaklaştırmak için Yakınlaştır listesini kullanın.

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

Ekran görüntüsü alın

Görüntü alanında gördüklerinizin ekran görüntüsünü yakalamak için Diğer seçenekler. Diğer seçenekler > Ekran görüntüsü yakala'yı tıklayın.

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

Ağı ve CPU'yu daralt

Hem ağı hem de CPU'yu daraltmak için Hızlandırılmış listesinden Orta katman mobil veya Düşük teknoloji mobil cihaz'ı seçin.

Kısıtlama listesi.

Orta katman mobil, hızlı 3G bağlantısını simüle eder ve CPU'nuzu normalden 4 kat daha yavaş olacak şekilde kısıtlar. Düşük teknoloji mobil cihaz, yavaş 3G bağlantısını simüle eder ve CPU'nuzu normalden 6 kat daha yavaş kısar. Kısıtlamanın, dizüstü veya masaüstü bilgisayarınızın normal kapasitesine bağlı olduğunu unutmayın.

Cihaz araç çubuğunuz darsa Daraltma listesinin gizleneceğini unutmayın.

Yalnızca CPU'yu daralt

Ağı değil yalnızca CPU'yu daraltmak için Performans paneline gidin, Ayarları Yakala'yı Yakalama ayarları. tıklayın ve CPU listesinden 4 kat yavaşlama veya 6 kat yavaşlama'yı seçin.

CPU listesi.

Yalnızca ağı daralt

CPU'yu değil yalnızca ağı daraltmak için paneline gidip Hızlı 3G veya Yavaş 3G öğesini seçin.

Kısıtlama listesi.

Alternatif olarak, Komut Menüsü'nü açmak için Command+Üst Karakter+P (Mac) veya Control+Üst Karakter+P (Windows, Linux, ChromeOS) tuşlarına basın, 3G yazıp 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ğ daraltmayı Performans panelinden de ayarlayabilirsiniz. Yakalama Ayarları Yakalama ayarları. simgesini tıklayın ve listesinden Hızlı 3G veya Yavaş 3G öğesini seçin.

Performans panelinden ağ daraltmayı ayarlama.

Sensör emülasyonu

Coğrafi konumu geçersiz kılmak, cihaz yönünü, dokunmaya zorlamak ve boşta kalma durumu emülasyonu yapmak için Sensörler sekmesini kullanın.

Sonraki bölümlerde, coğrafi konumun nasıl geçersiz kılınacağı ve cihaz yönünün nasıl ayarlanacağı hakkında hızlı bir 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ılan kullanıcı arayüzünü açmak için DevTools'u özelleştirin ve kontrol edin Geliştirici Araçları'nı özelleştirin ve kontrol edin. seçeneğini tıklayın ve ardından Diğer araçlar > Sensörler'i seçin.

Sensörler

Alternatif olarak, Command+Üst Karakter+P (Mac) veya Control+Üst Karakter+P (Windows, Linux, ChromeOS) tuşlarına basarak Komut Menüsü'nü açın, Sensors yazın ve ardından Sensörleri Göster'i seçin.

Sensörleri Göster

Konum listesinden hazır ayarlardan birini seçin veya kendi koordinatlarınızı girmek için Diğer... öğesini seçin ya da coğrafi konum hatalı olduğunda sayfanızın nasıl davrandığını test etmek için Konum kullanılamıyor'u seçin.

Coğrafi konum

Yönü ayarla

Yön kullanıcı arayüzünü açmak için Geliştirici Araçları'nı özelleştirin ve kontrol edin'i Geliştirici Araçları'nı özelleştirin ve kontrol edin. tıklayın, ardından Diğer araçlar > Sensörler'i seçin.

Sensörler

Alternatif olarak, Command+Üst Karakter+P (Mac) veya Control+Üst Karakter+P (Windows, Linux, ChromeOS) tuşlarına basarak Komut Menüsü'nü açın, Sensors yazın ve ardından Sensörleri Göster'i seçin.

Sensörleri Göster

Yön listesindeki hazır ayarlardan birini seçin veya kendi alfa, beta ve gama değerlerinizi ayarlamak için Özel yön'ü seçin.

Yön