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

Bir web geliştiricisiyseniz veya çevrimiçi bir işletmeniz varsa, bir mobil sitenin masaüstünde nasıl göründüğünü merak ediyor olabilirsiniz. İnternet trafiğinin yarısından fazlası telefonlardan geldiği için 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 çekici bir şey satın alma olasılığı daha yüksektir. Bir masaüstü görünümü, düzenlemeler yapmanıza ve olası sorunları daha erken çözmenize de yardımcı olabilir.

Neyse ki, bu nispeten basit bir süreçtir. Bu yazıda, 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 Versiyonunu Mac'te Chrome'da Görüntüleme

Chrome'da, ön ucu test edebilir ve DevTools adlı yerleşik bir geliştirici aracı kullanarak web sitesinin tüm bileşenlerinin düzgün çalışıp çalışmadığını görebilirsiniz. DevTools, önceden tanımlanmış cihaz seçenekleri sağladığından, geliştiricinin görünümü herhangi bir geliştirici uzantısı olmadan masaüstünden mobile ve tersi yönde 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 Emülasyonunu Değiştir" simgesine tıklayın.
   
4. Taklit etmek için bir iOS ve Android cihaz listesinden seçim yapabilirsiniz.
   
5. Web sitesini seçtiğiniz mobil biçimde gösterecektir.
   

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

Bir Web Sitesinin Mobil Versiyonunu Windows PC'de Chrome'da Görüntüleme

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ını sağ tıklayın ve menüden “İncele” seçeneğini 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'ye 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 boyutlarını ihtiyaçlarınıza göre değiştirebilirsiniz.

Bir Web Sitesinin Mobil Versiyonunu Chromebook'ta Chrome'da Görüntüleme

Chromebook kullanarak Chrome'da 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 simgesine 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ş simgesine 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 edilen cihaz deneyimini de seçebilirsiniz. Geliştirici araçları konsolunu her kapattığınızda web sayfası bir masaüstü sitesi olarak yenilenecektir.

Mac'te Firefox'ta Bir Web Sitesinin Mobil Versiyonunu Görüntüleme

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 sürümünü açın.
2. Web sayfasına sağ tıklayın ve menüden “İncele” seçeneğini seçin.
   
3. "Duyarlı Tasarım Modu"nu seçin.
   
4. Web sitesinin ekran boyutunu seçin.
   

Windows PC'de Firefox'ta Bir Web Sitesinin Mobil Versiyonunu Görüntüleme

Windows PC'ler ayrıca Firefox kullanarak 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. PC'nizde Firefox'u başlatın.
   
2. Mobil versiyon olarak görmek istediğiniz web sitesine gidin.
   
3. Yatay üç çubuk simgesine tıklayarak "Ayarlar"a gidin.
   
4. Bir "Web Geliştirici" seçeneği belirlemeniz gereken bir açılır menü göreceksiniz.
   
5. "Duyarlı Tasarım Modu"nu 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 Görüntüleme

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, bir web sitesinin mobil sürümünü Safari'de de 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ştir” menüsüne tıklayın.
   
4. Açılır menüden "Duyarlı Tasarım Moduna Girin"i seçin.
   
5. Artık web sitesinin mobil sürümünü görüntüleyebilirsiniz.
   

Ek SSS

Bir Web Sitesinin Masaüstü Sürümünü Telefonumda Görüntüleyebilir miyim?

Cevap Evet! Bilgisayar kullanmadan kontrol etmek için mobil versiyondan masaüstü versiyona geçebilirsiniz. Chrome'da mobil sürümü masaüstü sürümüne geçirmek için izlenecek 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.

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

Geliştirici araçları, cihazları değiştirmeden bir web sitesinin mobil sürümünü bir masaüstünde 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ı, sitenin ön ucunun telefonlarda, tabletlerde ve masaüstü bilgisayarlarda nasıl göründüğünü her zaman 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 sorunları çözmek için sorun yarattığını 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.