Bir Web Sitesinin Mobil Versiyonunu Bilgisayarda Nasıl Görüntüleyebilirsiniz?

Bir web geliştiricisiyseniz veya çevrimiçi bir işletmeye sahipseniz, bir mobil sitenin masaüstünde nasıl göründüğünü merak ediyor olabilirsiniz. İnternet trafiğinin yarısından fazlası telefonlardan geldiğinden, mobil sitenizin görünümü ve işlevselliği çok önemli olabilir. Müşterilerin bir sitede daha uzun süre kalma veya görsel olarak çekiciyse bir şey satın alma olasılığı daha yüksektir. Masaüstü görünümü, düzenlemeler yapmanıza ve olası sorunları daha kısa sürede düzeltmenize de yardımcı olabilir.

Neyse ki, bu nispeten basit bir süreçtir. Bu makalede, bir web sitesinin mobil sürümünü farklı cihazlarda ve tarayıcılarda nasıl görüntüleyeceğinizi göstereceğiz.

Bir Web Sitesinin Mobil Sürümünü Mac'te Chrome'da Nasıl Görüntüleyebilirsiniz?

Chrome'da, DevTools adlı yerleşik bir geliştirici aracını kullanarak ön ucu test edebilir ve web sitesinin tüm bileşenlerinin düzgün çalışıp çalışmadığını görebilirsiniz. Önceden tanımlanmış cihaz seçenekleri sağladığı için DevTools, geliştiricinin herhangi bir geliştirici uzantısı olmadan görünümü masaüstünden mobil veya tam tersi şekilde hızla değiştirmesinin en iyi yoludur.

Ayrıca ekran boyutunu ihtiyaçlarınıza göre değiştirebilir ve web sitenizin farklı ekran boyutlarında nasıl görüneceğini görmek için ekran genişliğini ve yüksekliğini ayarlayabilirsiniz. Bunu bir Mac'te yapmak için şu adımları izleyin:

1. Google Chrome tarayıcısını başlatın ve görüntülemek istediğiniz siteye gidin.
   
2. DevTools'a erişmek için klavyenizde F12'ye basın.
   
3. Mod açıldığında, Aygıt Öykünmesini Değiştir simgesine tıklayın.
   
4. Onları taklit etmek için bir iOS ve Android cihazları listesinden seçim yapabilirsiniz.
   
5. Web sitesini seçtiğiniz mobil formda gösterecektir.
   

İşiniz bittiğinde, web sitesinin mobil sürümünü kapatmak için geliştirici araçları penceresini kapatmanız yeterlidir.

Windows PC'de Chrome'da Bir Web Sitesinin Mobil Sürümünü Nasıl Görüntüleyebilirsiniz?

Bir web sitesinin mobil sürümünü Chrome'da Windows PC'de görüntülemek istiyorsanız, bu oldukça benzer bir işlemdir:

1. Chrome tarayıcıyı açın.
   
2. Chrome'da, mobil sürümde görmek istediğiniz web sitesine gidin.
3. Web sayfasına sağ tıklayın ve menüden İncele'yi seçin.
   
4. Geliştirici Araçlarına gitmek için Diğer Araçlar sekmesine tıklayın ve Geliştirici Araçları'nı seçin veya DevTools'u açmak için F12 tuşuna basın.
   
5. Geliştirici Araçları penceresi açılacaktır.
6. Mobil Site Görünümü Moduna geçmek için Cihaz Değiştirme Simgesine tıklayın.
   
7. Taklit etmek istediğiniz mobil cihazı seçin (isteğe bağlı).
   
8. Artık ekranın boyutlarını ihtiyaçlarınıza göre değiştirebilirsiniz.

Chromebook'ta Bir Web Sitesinin Mobil Sürümünü Chrome'da Nasıl Görüntüleyebilirsiniz?

Bir Chromebook kullanarak Chrome'daki bir web sitesinin mobil sürümüne erişmek, ilk iki yönteme çok benzer.

1. Google Chrome web tarayıcısını açın.
   
2. Mobil cihazınızda erişmek istediğiniz web sayfasını açın.
   
3. Menüye erişmek için dikey üç nokta simgesini tıklayın.
   
4. Farenizi listedeki Diğer Araçlar öğesinin üzerine sürükleyin.
   
5. Geliştirici Araçları'nı seçin.
   
6. Tarayıcıdaki Geliştirici Araçları penceresi açılacaktır.
   
7. Cihaz geçiş simgesini tıklayarak mobil site görünümü modunu değiştirin.
   

Bu, mobil site için kullanıcı arayüzünü getirecektir. Ayrıca açılır kutudan marka ve modeli seçerek tercih ettiğiniz cihaz deneyimini de seçebilirsiniz. Geliştirici araçları konsolunu her kapattığınızda web sayfası bir masaüstü sitesi olarak yenilenir.

Mac'te Firefox'ta Bir Web Sitesinin Mobil Versiyonu Nasıl Görüntülenir

Bir mobil siteyi Mac masaüstünde görüntülemek için Firefox gibi diğer web tarayıcılarını kullanabilirsiniz. Tarayıcı penceresini yeniden boyutlandırmak, çoğu web geliştiricisinin duyarlı tasarım web sitesini değerlendirmek için kullandığı yöntemlerden biridir. Ancak çoğu zaman bu alternatif kabul edilebilir görünmeyecektir.

Firefox tarayıcısının web geliştirme yeteneklerinin işe yaradığı yer burasıdır. Firefox'ta web sitelerinin mobil sürümlerine nasıl erişeceğinizi biliyorsanız, web sayfalarınıza birden çok çözünürlükte göz atabilirsiniz. Bu adımları takip et:

1. Görmek istediğiniz web sitesinin mobil versiyonunu açın.
2. Web sayfasına sağ tıklayın ve menüden İncele seçeneğini seçin.
   
3. Duyarlı Tasarım Modunu seçin.
   
4. Web sitesinin ekran boyutunu seçin.
   

Windows PC'de Firefox'ta Bir Web Sitesinin Mobil Versiyonu Nasıl Görüntülenir

Windows PC'ler ayrıca Firefox kullanan web sitelerinin mobil sürümlerini görüntüleme seçeneğine de sahiptir. Bunu nasıl yapacağınız aşağıda açıklanmıştır:

1. Bilgisayarınızda Firefox'u başlatın.
   
2. Mobil versiyon olarak görmek istediğiniz web sitesine gidin.
   
3. Yatay üç çubuklu simgeye tıklayarak Ayarlar'a gidin.
   
4. Bir Web Geliştirici seçeneği seçmeniz gereken bir açılır menü göreceksiniz.
   
5. Duyarlı Tasarım Modunu seçin.
   
6. Son olarak, sitenizin o cihazda nasıl görüneceğini görmek için bir akıllı telefon modeli seçebilirsiniz.
   

Bir Web Sitesinin Mobil Versiyonunu Mac'te Safari'de Nasıl Görüntüleyebilirsiniz?

Chrome ve Firefox kullanarak bir mobil web sitesinin masaüstünde nasıl görüntüleneceğini ele aldık. Peki ya Mac cihazlarıyla birlikte gelen varsayılan tarayıcı Safari? Neyse ki, Safari'de bir web sitesinin mobil versiyonunu da görüntülemek mümkündür.

1. Safari tarayıcısını başlatın.
   
2. Mobil sürüm olarak görüntülemek istediğiniz web sitesine gidin.
   
3. Seçenekler'e ve ardından Geliştirme menüsüne tıklayın.
   
4. Açılır menüden Duyarlı Tasarım Moduna Gir'i seçin.
   
5. Artık web sitesinin mobil sürümünü görüntüleyebilirsiniz.
   

Ek SSS

Bir Web Sitesinin Masaüstü Versiyonunu Telefonumda Görüntüleyebilir miyim?

Cevap Evet! Bilgisayar kullanmadan kontrol etmek için mobil sürümden masaüstü sürümüne geçebilirsiniz. Chrome'da mobil sürümü masaüstü sürüme geçirme adımları şu şekildedir:

1. Masaüstü görünümünde görmek istediğiniz web sitesine gidin.

2. Menüye erişmek için üç nokta simgesine dokunun.

3. Şimdi Masaüstü Görünümü seçeneğini seçin.

Bu adımların kullandığınız telefona göre değişebileceğini unutmayın.

snapchatte hayalet nasıl değiştirilir

Mobil Web Tasarımını Kolaylaştırma

Geliştirici araçları, bir web sitesinin mobil sürümünü masaüstünde cihaz değiştirmeden analiz etmek ve değiştirmek için harikadır. Bileşenlerin çeşitli cihazlarda nasıl çalıştığını gözlemlemek için ekran boyutunu değiştirebilirsiniz. Duyarlı modu kullanarak farklı bileşenleri ayarlayabilir ve birden çok ekran boyutu için web sitesi oluşturabilirsiniz.

Bir web sitesi tasarlarken, tasarımcı her zaman sitenin ön ucunun telefonlarda, tabletlerde ve masaüstlerinde nasıl göründüğünü akılda tutmalıdır. Makalede açıklanan yöntemleri kullanmak, geliştiricinin bunu yapmasına ve ayrıca bir web sitesinin hangi bileşenlerinin bunları düzeltmek için sorun oluşturduğunu belirlemesine yardımcı olabilir.

Bir sitenin mobil sürümünü masaüstünüzde görüntülemeyi hiç denediniz mi? Bunu yapmak için hangi tarayıcıyı kullanmayı tercih edersiniz? Aşağıdaki yorumlar bölümünde bize bildirin.