Veb saytın mobil versiyasına necə baxmaq olar: cəmi 3 kliklə

Veb saytın mobil versiyasına necə baxmaqla mübarizə aparırsınız?

Yaxşı, açıq bir həll yalnız telefonunuzu çıxarmaq və orada veb saytı açmaqdır. Ancaq bu yazını oxuyursunuzsa, yəqin ki, nədənsə bu sizin üçün bir seçim deyil.

Şükürlər olsun ki, veb-saytın mobil versiyasına birbaşa masaüstü veb brauzerinizdən baxmaq üçün bir çox başqa yollar var. Beləliklə, telefona çıxışınız olmasa belə, nə olursa olsun veb-saytın mobil versiyasını asanlıqla görə biləcəksiniz.

Bu yazıda biz veb-saytın mobil versiyasına necə baxmağın dörd sadə üsulunu paylaşacağıq:

• İlk iki üsul, istər sizin veb saytınız, istərsə də başqasının saytı olsun və WordPress, Shopify, Wix, Squarespace və ya başqa bir şey ilə qurulmasından asılı olmayaraq istənilən veb sayt növü ilə işləyəcək.
• Son iki üsul WordPress saytınızın mobil versiyasına necə baxacağınızı göstərən WordPress-ə xüsusi seçimlərdir. Bunlar yalnız saytın sahibi olsanız işləyəcək.

Veb saytın mobil versiyasına brauzerinizdən necə baxmaq olar

Veb saytın sahibi olub-olmamağınızdan asılı olmayaraq, internetdə hər hansı veb-saytın mobil versiyasına baxmaq üçün iki asan yol var:

1. Veb brauzerinizin inkişaf etdirici alətlərindən istifadə edin. Chrome bunun üçün əla işləyir, lakin əksər digər veb brauzerlər oxşar alətlər təklif edir.
2. Xüsusi mobil emulyator alətindən istifadə edin. Etdiyiniz tək şey görmək istədiyiniz URL-i daxil etməkdir və siz onu mobil istifadəçi kimi nəzərdən keçirə biləcəksiniz.

Gəlin hər iki üsuldan keçək. Daha sonra, mobil versiyaya necə baxmaq lazım olduğunu sizə göstərəcəyik özünüz qurduğunuz veb saytın (WordPress-də).

Veb brauzerinizin inkişaf etdirici alətlərindən istifadə edin

Google Chrome, Safari, Firefox, Microsoft və Brave kimi əksər brauzerlər vebsaytın müxtəlif cihazlarda necə göründüyünü görmək də daxil olmaqla, onu kəşf etməyə imkan verən tərtibatçı alətləri təklif edir.

Developer alətləri ilə siz tez bir zamanda vebsaytın müxtəlif smartfonlarda, planşetlərdə və s.-də necə göründüyünü görə bilərsiniz.

Bu nümunələr üçün biz güman edəcəyik ki, siz Chrome (və ya Brave kimi hər hansı Chromium əsaslı brauzer) istifadə edirsiniz. Bununla belə, əksər digər veb brauzerlər oxşar funksiyaları təklif edir, baxmayaraq ki, interfeys fərqli olacaq.

Başlamaq üçün veb saytınızın ön tərəfində sağ klikləyin və seçin Yoxlamaq menyudan:

Bu, tərtibatçı alətlərini işə salır və sağda həmin səhifədən kodlaşdırma elementləri olan modulu ortaya qoyur.

Əsas məqsəd veb saytın mobil versiyasına baxmaq üçün keçmək olduğundan kodlaşdırma ilə bağlı narahat olmaq lazım deyil. Kiçik tapın Cihaz Alətlər Panelini dəyişdirin düyməsini (telefon və planşet ikonasına bənzəyir) və mobil görünüşü aktivləşdirmək üçün üzərinə klikləyin.

Bu, avtomatik olaraq cavab verən mobil görünüş nümayiş etdirir, burada siz təqlid etmək istədiyiniz cihaz əsasında cihazın ölçülərini dəyişə bilərsiniz:

Bu metodu daha da cəlbedici etmək üçün vebsaytınızın real dünya cihazlarında necə göründüyünə daha dəqiq nəzər salmaq üçün daxili cihaz defoltları ilə bir neçə seçimdən biridir.

Nümunə olaraq, siz iPad Pro seçə bilərsiniz və o, dərhal ekranın ölçülərini iPad Pro-nun ölçülərinə uyğunlaşdırır.

Və ya daha kiçik Pixel 2 XL seçə bilərsiniz.

Və ya daha kiçik Galaxy Fold. Siyahıdakı cihazların hər birini sınayın və veb saytınızın hər birində məqbul göründüyünə əmin olun.

Onlayn tester və ya emulyatordan istifadə edin

Emulatorlar ümumiyyətlə tətbiqləri yerli mühitlərində sınamaq üçün istifadə olunur, lakin onların bir çoxu veb-saytın cavablandırılması üçün əlçatandır. Siz həmçinin URL-nizə yapışdırmaq və daha kiçik cihazlarda necə göründüyünü görmək üçün onlayn əsas testçiləri tapa bilərsiniz.

ResponsivePX.com münasib seçimdir, lakin sürətli onlayn axtarışla bir çox başqalarını tapa bilərsiniz.

İnsanlara emulyatorları və simulyatorları sınamağı təklif etməyimizin səbəbi, onların sizə sayt ölçüləri üzərində daha çox nəzarəti təmin etməsidir. Və onlar tez-tez brauzerinizin inkişaf etdirici alətlərindən istifadə etməkdən daha sadədirlər.

Məsələn, ResponsivePX.com-u götürün: Siz sayta daxil olursunuz, URL-ə yapışdırırsınız və dərhal mobil versiyanı görürsünüz.

Bu, eni, hündürlüyü və sürüşmə çubuğunun görünməsini tənzimləməyə imkan verir. Siz hətta nəticələri təşkilatınızdakı insanlarla paylaşa bilərsiniz.

WordPress veb saytınızın mobil versiyasına necə baxmaq olar

Öz WordPress saytınızda işləyirsinizsə, WordPress saytınızın mobil cihazlarda necə görünəcəyini görməyə kömək etmək üçün bəzi daxili seçimlər də təqdim edir.

WordPress redaktorunda işlədiyiniz zaman məzmununuzun müxtəlif cihazlarda necə görünəcəyini tez bir zamanda görə bilərsiniz. Mövzunuzu WordPress Customizer-də fərdiləşdirərkən də eyni şeyi edə bilərsiniz.

Gəlin bu üsullardan keçək…

Səhifə və ya post redaktorunun önizləməsi vasitəsilə mobil versiyaya baxın

Siz vebsaytın mobil versiyasına səhifə-səhifə baxa bilərsiniz. Məsələn, cari bloq yazınızın mobil görünüşündə görünə biləcəyini görmək istəyə bilərsiniz. Xüsusilə dizaynı dəyişdirdikdən sonra mobil cavablandırma üçün ana səhifənizi yoxlamaq da müdrikdir.

Əsas səhifədən başlayaq. Aşağıdakı veb saytın masaüstü görünüşündən belə görünür:

Siz səhifəyə keçməklə fərdi səhifəyə baxa və mobil baxışları dərc edə bilərsiniz Yazılar və ya Səhifələr WordPress panelindəki nişanlar.

Əvvəllər yaradılmış yazılar və səhifələr üçün bura keçin Bütün Yazılar və ya Bütün Səhifələr.

Bir səhifə ilə başlayacağıq; daha dəqiq desək, Əsas səhifə. İstədiyiniz səhifəni seçin.

WordPress backendindəki hər səhifə və yazı yuxarı sağ küncdə Ön Baxış linki təklif edir. Bu seçimlərlə açılan menyunu açmaq üçün həmin Önizləmə düyməsini seçin:

Varsayılan olaraq, WordPress Desktop versiyasını göstərir.

Veb saytınızın şəkillər, videolar, menyular və mətn qutuları kimi elementlərini daha kiçik, daha oxuna bilən və tıklana bilən formata çevirdiyini görmək üçün Planşet və ya Mobil görünüşünü seçin.

Saytınızı digər görünüşlərdə sınaqdan keçirərkən, linklərin tıklanabilir (çox kiçik deyil), aktivlərin hələ də göründüyünü və istifadəçini böyütməyə məcbur etmədən hər şeyin aydın olduğunu yoxlayın.

Bütün məzmunu yoxlamaq üçün səhifəni aşağı sürüşdürmək üçün bir az vaxt ayırın. Bu sayt, məsələn, ana səhifəsində şəkillər, məhsul adları və Səbətə əlavə et düymələri ilə çoxlu e-ticarət məhsullarını siyahıya alır.

Onlar layiqli görünürlər, lakin məhsul detallarını daha böyük etmək üçün iki və ya üç məhsul sütununa keçmək istərdik.

Bu üsuldan istifadə edərkən yazılar fərqli deyil. Onlar sadəcə WordPress-in ayrıca bölməsində yerləşirlər (Yazılar → Bütün Yazılar).

Onların statik veb-səhifələri deyil, blog yazılarınızı necə ehtiva etdiyini nəzərə alaraq, mobil dostluğu yoxlamaq daha vacibdir. Niyə? Çünki bir çox şirkətlər hər ay onlarla bloq yazısı dərc edərək səhifələrə kiçik yeniliklər edir. Bloq sizin əsas məzmun mənbəyinizdirsə, dərc etməzdən əvvəl onların hər birinin mobil üçün hazır olduğundan əmin olmalısınız.

Həmişə olduğu kimi, Preview-ə keçin, sonra Tablet və ya Mobil üzərinə klikləyin.

Masaüstü görünüşü bəzən Planşet görünüşünə çox bənzəyir, ona görə də brauzerinizdə böyüdülmədiyinizə əmin olun.

Planşet görünüşü Masaüstü görünüşündən bir qədər kiçik görünür, lakin daha real planşet ölçüsünü təqlid edərək saytın məzmunu ətrafında qara boşluq var.

WordPress Customizer-də veb saytın mobil versiyasına baxın

WordPress Customizer yalnız WordPress mövzusunu redaktə etməyiniz üçün əla yollar təqdim etmir, həm də redaktə etdiyiniz zaman saytınıza vizual baxışa malikdir.

Xoşbəxtlikdən, WordPress Customizer sizi təkcə masaüstü önizləmə ilə məhdudlaşdırmır. Əslində, cib telefonu və ya planşet görünüşünə baxarkən bütün redaktələrinizi tamamlamaq mümkündür.

Bunu etmək üçün gedin Görünüş → Fərdiləşdirin Customizer-i işə salmaq üçün.

Varsayılan olaraq, Customizer necə görünür. O, solda tənzimləmək üçün parametrlər və sağda sayta baxış olan standart Masaüstü görünüşündədir.

Üç düymə nişanını tapmaq üçün parametrlər siyahısının ən aşağısına baxın: biri Masaüstü görünüşü üçün, digəri Planşet görünüşü üçün və üçüncüsü Mobil görünüş üçün.

Cari redaktələrinizin ümumi planşetin ölçüsündə interfeysdə necə göründüyünü görmək üçün Planşet görünüşü düyməsini klikləyin.

Mobil Görünüş düyməsi həmin interfeysi kiçik edir və sizi mobil smartfonun standart pəncərə ölçüsünə yaxınlaşdırır.

Qeyd: Nəzərə alın ki, bu backend mobil önizləmələri təxminlərdir. Dünyada bu qədər çox cihaz növü ilə heç kim eyni şeyi görməyəcək.

Menyular haqqında unutmayın. Menyular mobil cihazlarda olduqca problemlidir. Mövzu tərtibatçısının xeyli miqdarda sınaq keçirib-keçmədiyini yoxlayın. Mobil menyunun adətən gizli hamburger menyusuna (üç üfüqi xətt) yerləşdirildiyini və sonunda iki menyu ilə nəticələnə biləcəyinizi görəcəksiniz (məsələn, bu mövzu ekranın altındakı e-ticarət düymələrini necə təmin edir).

Həmişə olduğu kimi, ilk səhifəyə tez baxmaqdan və bütün veb saytınızın hazır olduğunu düşünməkdən çəkinin. Bu, ümumi istifadəçi təcrübənizə xələl gətirən kiçik çatışmazlıqları qaçırmaq üçün bir reseptdir.

Məhsul səhifələrindən tutmuş blog yazılarına və alış-veriş səbətlərindən Haqqımızda səhifələrə qədər hər şey daxil olmaqla, Planşet görünüşündə olarkən bütün veb saytınızı gəzin.

Və eyni prosesi Mobil Görünüşdə tamamlayın. Xüsusilə e-ticarət funksionallığını sınamağı tövsiyə edirik, çünki istədiyiniz son şey kiçik yoxlama modulu və ya Səbətə əlavə et düyməsidir.

Veb saytın mobil versiyasına baxmaq asandır

Ən çevik seçim brauzerinizin inkişaf etdirici alətlərindən istifadə etməkdir. Bu nə olursa olsun işləyəcək. Veb saytın masaüstü versiyasını aça bildiyiniz müddətcə, tərtibatçı alətlərindən istifadə edərək mobil versiyaya əvvəlcədən baxa bilərsiniz.

Emulator yanaşması əksər veb-saytlarla da işləyir, baxmayaraq ki, emulyatorun veb-saytı əldə edə bilməsi üçün vebsaytda ictimaiyyət üçün açıq URL olmalıdır.

Digər tərəfdən, WordPress istifadəçisisinizsə, saytınızda işləyərkən işi görmək üçün WordPress-in daxili cavab verən önizləmə alətlərinə etibar edə bilərsiniz. Və ya digər üsullar da WordPress saytları üçün əla işləyir.

Öz saytınızda işləmək üçün mobil görünüşə ehtiyacınız varsa, saytınızın mobil versiyasına baxarkən nələrə diqqət yetirməli olduğunuza dair bəzi məsləhətlər üçün mobil uyğun veb-sayt yaratmaq üçün bələdçimizi də nəzərdən keçirmək istəyə bilərsiniz.