Artık mobil bir dünyada olduğumuz için web sitelerini kolayca cep telefonlarında veya taklit edilmiş cep telefonlarında test edebilmek giderek daha önemli hale geliyor. Web sitelerinde ve sosyal medya tekliflerinde çalışan insanlarla işbirliği yapıyorum ve web sitelerini düzenli olarak masaüstü tarayıcılarından mobil görünümde açmaya teşvik ediyorum. Özellikle tarayıcının sağladığı tüm diğer geliştirici araçları arasında gizlenen, tarayıcının yerleşik "mobil görünümü" özelliğini özellikle düşünüyorum, ancak kurulumu kadar hızlı olan her şeyi düşünmekten mutluyum.

Bir web sitesinin mobil görünümünü bir masaüstü tarayıcısından nasıl açabilirsiniz?

Firefox:

• Windows / Linux'ta Ctrl+ Shift+ tuşlarına basınM
• MacOS'ta option+ command+ tuşlarına basınM

Menü öğesini ("Araçlar"), "Web Geliştirici", "Duyarlı Tasarım Modu" altında da bulabilirsiniz.

Krom:

Önce “Geliştirici Araçları” nı açmanız gerekir:

• Windows / Linux'ta, Ctrl+ Shift+ IveyaF12
• MacOS'ta option+ command+ tuşlarına basınI

Geliştirici araçları açık ve odaklandıktan sonra, cihaz araç çubuğunu açabilirsiniz:

• Windows / Linux'ta Ctrl+ Shift+ tuşlarına basınM
• MacOS'ta command+ shift+ tuşlarına basınM

Menü öğesini ayrıca geliştirici araçlarını ("Diğer Araçlar", "Geliştirme Araçları") açarak ve ardından "Cihaz araç çubuğunu değiştir" masasının önünde cep telefonu gibi görünen bir simgeye tıklayarak da bulabilirsiniz.

Safari:

Apple, varsayılan olarak duyarlı tasarım moduna girmek için klavye kısayolunu devre dışı bırakmış gibi görünüyor. Bunun için bir klavye kısayolu yapılandırmak için bu öğreticiyi takip edebilirsiniz .

Menü öğesini "Geliştir", "Duyarlı Tasarım Moduna Girin" i tıklayarak bulabilirsiniz. "Geliştirme" menü öğesini göremiyorsanız, "Tercihler", "Gelişmiş" seçeneğini açıp "Menü çubuğunda" Geliştirme menüsünü göster "seçeneğini işaretleyerek etkinleştirmeniz gerekir.

kenar:

• F12Geliştirici araçlarını açmak için tuşuna ve ardından "Emülasyon sekmesini" açmak için Ctrl+ tuşuna basın 7. Taklit etmek istediğiniz cihazı yapılandırın.

Geliştirici araçlarını, fareyi kullanarak web sayfasının içine sağ tıklayarak ve "kontrol et" seçeneğini seçerek açabilirsiniz.

Flimm'in cevabı % 100 doğru. Sadece kısayolları hatırlamakta güçlük çekiyorsa, geliştirici araçlarında web görünümü ile mobil / tablet görünümü arasında geçiş yapmak için kullanılan mavi düğme:

Veya Firefox ile:

Cihaz araç çubuğunu etkinleştirdikten sonra, açılır menüden taklit etmek istediğiniz cihazın markasını ve modelini seçebilirsiniz.

Test amacıyla aşağıdaki web sitelerini kullanıyorum: -

1. http://www.jamus.co.uk/demos/rwd-demonstrations/
2. http://mattkersley.com/responsive/

Yukarıdaki sitelerin ikisi de web uygulamamı birden fazla cihaz genişliğinde görmeme izin veriyor.

Tarayıcınıza bir "kullanıcı aracısı değiştirici" uzantısı ekleyin ve bir mobil kullanıcı aracısı belirtin. Web sitesi ise akıllı yeterince size mobil cihazlar için optimize sürümünü sunar.

Belirli bir uzantı önermeyeceğim. İdeal olanı, yerleşik mobil tarayıcılar için hazır ayarlara ve web sitesi bazında kullanıcı aracısı geçişini etkinleştirme veya devre dışı bırakma yeteneğine sahip olmalıdır.

Yukarıdaki cevaplar, tek bir tarayıcıya bağlı kalmak veya masaüstü "çalışma alanı" nı sınırlandırmak isteyenler için harikadır (örneğin, düşük çözünürlükte 21'den daha az tek monitör).

Aslında son zamanlarda keşfettiğim daha ilginç bir çözüm var: https://blisk.io/

Herhangi bir kişisel kazanç için ("tür") bağlı kuruluş bağlantısını kullanmaktan kaçınacağım (ücretsiz "ekip bulut alanı" ve "premium özellikler" gibi şeyleri kullanabilmek için kredi kazanabileceğiniz "belirteç tabanlı bir sistem" var. o), ama Blisk aslında oldukça şık.

Bu Chromium tabanlı "geliştirme için oluşturulmuş tarayıcı", LEFT tarafında dikey bir "bölme" bulunan çeşitli aygıtlarda sayfayı demonte etmenin çok sayıda yolunu sunar; tıpkı, Chrome Geliştirici Araçları'nın varsayılan olarak sağ dikey sütunda göründüğü gibi.

İşe bir bakış. "Sınırlı genişletilmiş işlevselliği" için bazı sınırlamalar olsa da, sayfalarınızın / sitelerinizin hem PC hem de Mobil sürümlerini yan yana karşılaştırarak "önizleme" yapmak için hala çok iyi çalışıyor. Uzak takımlarda çalışıyorsanız (ücretli olarak insanları kandırmadan önce kişisel olarak daha iyi bir "test sürüşü" programına ihtiyaç duyduğunu düşünüyorum), ücretli özellikler de oldukça iyi görünüyor.

Tam açıklama: mobil önizleme bölümünde günde son derece can sıkıcı bir "zaman sınırı" var (simge, adres çubuğunun sağındaki simgeye kadar açık / kapalı geçiş yapar - "cihaz önizlemesini" minik bağlantıdan değiştir) sağ üst köşedeki menü "Cihaz listesini göster").

BliskDemoScreenshot

Ayrıca: Chrome / Firefox’tan 2 farklı "User-Agent Switcher" ları gibi Tarayıcı Eklentileriyle, gerçekten de çok çeşitli hileler buldum. Onlar için tarayıcılar.

İstediğiniz kadar çok özelleştirme için listeye özel kullanıcı aracısı dizeleri eklemenin ne kadar kolay olmasından dolayı "esolutions.se" lezzetini tercih ederim (ayrıca çevrimdışı durumda çalışır, belirli durumlarda kullanışlı olabilir): https: //chrome.google.com/webstore/detail/user-agent-switcher/clddifkhlkcojbojppdojfeeikdkgiae

Neyse, bu benim 2 sentim. : P