Düzeni farklı izinlerde kontrol edin. Uyarlanabilir Tasarım Nasıl Test Edilir? İos simülatörü ve android emülatörünü kullanarak

Tarayıcı penceresinin boyutunu değiştirmeyi bırak, tecavüz etmek için yeterli! Tartışmaya hazır, defalarca duydunuz. Peki, belki ve duymadım. Ancak, adaptif sitelerin geliştirilmesine profesyonel olarak meşgulseniz, ne olduğumu anlarsınız: herhangi bir DOM veya düzenleme CSS değişikliği ve tekrar tarayıcıyı ileri, geri, test etme ve yanlış bir şey izlemeye başlarsınız.

Hareketlerinizin amacı, çeşitli cihazların ekranlarını taklit etmektir.

İÇİNDE kurumsal çevre Genellikle, test şirketi tarafından sağlanan birçok gadget'ınız var. Benim emrimde işimde iPad, iPod, diğer tabletler, dizüstü bilgisayarların yanı sıra masaüstü monitörleri var. Eğer böyle bir lüksünüz yoksa, elinizde olanı kullanmak zorundasınız.

Neyse ki, düşündürücü bir set var Çevrimiçi enstrümanÇeşitli diyagonal cihazları taklit eden OV. Tabii ki, her birinin avantajları ve dezavantajları var, bu tür araçlara bakıyoruz.

Test için, aslında adaptif site pajamasonyourFeet.com'u seçtiler, site HTML5 şablonu, ücretsiz Egrappler'ten bazında inşa edilmiştir.

Duyarlı muyum?

Duyarlı, sitenizi 4 cihazda hızlı bir şekilde görüntülemenizi sağlayan çok basit bir araç. Hepsi - iOS ve geliştirici bunu bir site parçası ile açıklar. Genel olarak, hiçbir ayar, seçenek yok ve çok basit ve açıkça.

Kullanılabilir Boyutlar:

• masaüstü Monitör - 1600 x 992PX;
• dizüstü Bilgisayar - 1280 x 802PX;
• tablet - 768 x 1024PX;
• cep Telefonu - 320 x 480px.

Geliştiriciyi Citize: "Bu bir test aracı değil, gerçek cihazlarda test etmek son derece önemlidir. FAKAT bu araç Bir ekran görüntüsünü hızlı bir şekilde yapmaya ve müşteriye ne demek istediğinizi göstermeye yardımcı olacaktır. "

İki güzel cips var: aygıtları ekranda taşıma kabiliyeti ve aynı zamanda site testine bir bağlantıyı paylaşma fırsatı.

devasa

devicePonsive, duyarlıyım, minimum ayar ve seçenekle, basit olduğu gerçeğini duyuyorum. Her şey mevcut cihazlar Hemen bir ekranda görüntüler uzun sayfa. Tüm mevcut seçeneklerden, bu, başlık arka planını düzenleme ve logonuzu orada ekleyebilme ve ekran görüntüsünü paylaşmaya karar verdiğinizde kullanışlı olacaktır.

Cihazlar I. kullanılabilir izinler Ekranlar.

• MacBook - 1280 x 800
• iPad portre - 768 x 1024
• iPad Portre - 1024 x 768
• Kindle Portre - 600 x 1024
• Tutuşmak. lay yönlendirme - 1024 x 600
• iphone portre - 320 x 480
• iPhone manzara oryantasyonu - 480 x 320
• Galaxy Portre - 240 x 320
• Galaxy Peyzaj Oryantasyonu - 320 x 240

Çoğu benzer alette olduğu gibi, kaydırma çubukları gerçek cihazlarda olmaz, bu gösterilecektir. Bu, duyusal olmayan cihazlarda kaydırma sağlamak için gerekli bir adımdır.

duyarlı Test

DevicePonsive gibi, duyarlı test sitenizi görüntüler. Çeşitli cihazlar. Ama herkesi aynı anda göstermek yerine, kendin seç gerekli cihaz içinde Üst Menü Sayfalar. Bu arada, ölçeklendirme burada doğru bir şekilde çalışıyor, bu da test edilmesine izin veriyor daha fazla izin daha küçük

Sitede 30 farklı izin mevcuttur, büyük bir masaüstü monitöründen "çılgın android" diymeden önce (adalet normal bir android olduğunu söylemeye değer).

İlgili tarayıcı Firefox.Sonra bu siteyle doğru çalışmıyor. Lütfen ekran görüntüsünün yeşil başlık ile arka plan içeriğinin beyaz alanı arasında bir kaydırıcı göstermediğini lütfen unutmayın.

duyarlı.is

Önceki iki alete çok benzer, ancak yanıtlayıcıları diğerlerinden ayıran bir şey var. o pürüzsüz animasyon Bir cihazdan diğerine taşınırken, sitenin gerçek sitesini göstermeyen, görüntüleme alanına girmeyen yarı saydam bir alanın yanı sıra.

Mevcut Cihaz Seçenekleri - Otomatik (siteyi görebileceğiniz gibi), bir masa üstü bilgisayar, peyzaj ve dikey yönlendirme, portre ve manzara akıllı telefon. Px'de keyfi boyutları belirleyin, ne yazık ki bu imkansızdır.

Ekranlar.

Ancak özellikler ve erişilebilir seçenekler, önceki hizmetlerden gelen ekranlarla ayırt edilir. 14 telefon ve 12 tablet ile burada sunulur ayrı fırsat portreye geçin ve oturum aç. Sonuçlar, bir ızgarada kurallarla görüntülenir. Sağ veya alt kenarı çekerek keyfi bir çözünürlük belirlemek de mümkündür.

Bu sitenin ilginç bir özelliği, bir dizi cihaz için sitenizi yerel bir aygıt tarayıcısında gösteren bir "TrueView" seçeneği vardır.

Ne yazık ki, Firefox ve burada kaydırıcıyı gösteremedi. Beni suçlamaya gerek yok, Firefox benim favori tarayıcımdır, ancak böyle şeylerdir.

Screenfly

Ekranda belki de en işlevsel. Mevcut 9 cihazların tabletinden daha fazlası - 10 "dizüstü bilgisayarlar, en fazla 24" monitör, 5 tablet, 9 telefon, 3 televizyon izni ve keyfi çözünürlük. Burada dikey ve yatay moduna ayrı bir anahtar ekleyin ve ayrıca kaydırma gösterisi seçeneği. Bir düğmeyi kullanarak testin bir bağlantısını da paylaşabilirsiniz.

Menüdeki her cihaz, PX'deki ekranın boyutunu gösterir., Doğru üst köşe Tarayıcı pencerenizin gerçek boyutu görüntülenir.

Listelenen tüm avantajlar, bir kişi için değilse (Geliştirici Alıntı): "Sitenizi görüntülerken cihazları simüle etmek için bir proxy sunucusu kullanabilir. Proxy sunucusu, kullanıcı aracısı dizesini taklit eder, ancak bu cihazların davranışını değil. " ScreenFly, kullanıcı aracısı dizgisini test etmenizi sağlayan listeden tek servisdir.

Uygulamanızda sunulan araçları kullanıyor musunuz? Gelişen adaptif sitelerin sırlarını yorumlarınızı paylaşın.

P.S. Çeviri Hakkında Hatalar Kişisel olarak raporlayın.

Günün her zaman iyi, benim sevgili arkadaşlar Ve misafir blogu. Sadece üç yıl önce böyle bir şeyi duymadığımı hatırlıyorum. adaptif düzeni veya mobil versiyon. Ancak bugün onsuz, herhangi bir site arızalı görünüyor. Hayal edin, bir cep telefonundan siteye gidersiniz ve tam boyutta ve küçük yazı tipi ile orada.

Yani, sürekli olarak artması gerekir, bu, çok rahatsız edici olanı kaydırın. Ve mobil versiyon veya uyarlanabilir düzeni tüm bu sorunlar temizlenir. Bunu söyledikten sonra bile hatırlıyorum uyarlanabilir şablon İlk projenizde, sitenin nasıl göründüğünü merak ediyordum. farklı cihazlar. Bunu yapmak için harika bir hizmetten faydalandım. Ve bugün ondan bahseteceğim.

Ancak genel olarak, aslında, bu şeye de ihtiyaç vardır ve sonra kaynağınızın düzenini izlemeniz ve tüm parçaları gördünüz. Çünkü her zamanki ve mobil versiyonda, her şey iyi olabilir, ancak tabletlerde her şey savaşabilir. Bu nedenle, bu tür denetimlerin de kendi kaynağınızı oluşturduğunuzda kullanması gerekir.

Bir seferde kullanmadım ve daha sonra farklı aletlerde haritada parçalar var olduğu ortaya çıktı. Şimdi yardım için diğer verilerle iletişim kurmak zorundasınız.

Quirktools.com

Sitenin nasıl davrandığını görebileceğiniz en belirgin popüler hizmet, bu quirktools.com. Git ve basit bir Cepvis göreceksin sezgisel arayüz. Sadece ekran sekmesinde olduğunuzdan emin olun.

Şimdi sitenizin adresini özel bir hatta girin, ardından kaynağınızı sizin için göreceksiniz. normal durumla. Sonra en ilginç olanı başlayacak. Üst, çeşitli cihazlar anlamına gelen birkaç simge vardır: bilgisayarlar, tabletler, televizyonlar, telefonlar. Herhangi bir rozeti tıklatarak, açılır menüyü belirli izinler ve bunlara karşılık gelen modellerle ortaya çıkarırsınız.

Örneğin, beynimin 360 * 440 çözünürlükte Samsung Galaxy S3'e nasıl bakacağını görmek istiyorum. Telefon simgesine gideceğim ve seçeceğim uygun izin. Bu arada, burada sadece standart için galaksi hattı S, ben de modumu seçtim.

Ve şimdi her şey başarıyla ayarlandı. Ve tabii ki bir çözünürlükle sınırlı olmamalısınız. Yapabileceğin her yerde kontrol edelim. Ve bu arada, menüde başka bir ilginç düğme var - dönüş. Onun sayesinde, ekran 90 derece çevirirse, sitemizin neye benzediğini bilebiliriz.

ami.responsivedesign.is

Gerçekten hoşlandığım başka bir kontrol hizmeti - http://ami.responsiveSign.IS/. Siteye gidin ve özel bir alanda, istediğiniz kaynağın adresini girin ve ardından Git.. Sonuç olarak, dört cihaz için zaten dört farklı ekran göreceksiniz.

Bu durumun dikkate alındığı nedir, bu nedenle bu, cihazlar için sadece dört popüler izin bulunmasıdır, ancak hepsi aynı zamanda, genel resmi görebileceğiniz sayesinde gösterilir. Harika, evet?

deviceponsive.com.

devicePonsive.com yukarıdakilere çok benzer, ancak farklı ekranlar seçeneklerinin iki katıdır. Öyleyse sakince söyleyerek, kendinize, iyice yazın ve sonra sadece sayfalarla izlemesiyle ilerleyin.

Bu hizmetin artı, önceki gibi, sadece ekranı görmemenizdir ve bu cihazlar üzerinde çalışmayı da taklit edebilir, örneğin kaydırma, basın vb.

Mobil / Duyarlı Web Tasarım Test Cihazı

Ve tabii ki tarayıcıda herhangi bir genişlemeden bahsediyorum. Sonuçta, birçok durumda, bununla birlikte çalışmak çok daha uygundur.

Amaçlarımız için, Google Chrome'da bir uzantı yapmanızı öneririz. Mobil / Duyarlı Web Tasarım Test Cihazı. Kurulumdan sonra, mevcut izinlerden herhangi birini seçebileceğiniz (en çok) tıklayabileceğiniz, üstte karşılık gelen simge görünecektir. popüler modeller Cep telefonları ve tabletler), yanı sıra bölümündeki altta kendilerini ayarlayın. Özel kullanıcı aracısı / çözünürlük.

Bu arada, yukarıda benim tarafımdan açıklanan her şeyden, bu yöntem, adaptif düzenler dışında da görüntüleyen tek kişi, mobil sürümleri (VK.com) da ayırın, bu yüzden aklınızda bulundurun.

Bir pencere ile çalışma

Ve tabii ki, çekin en klasik versiyonundan bahsetmiyorum. Sitenin nasıl görüneceğini görmek için farklı izinler, sadece açmanız gerekiyor pencere modu, tam ekranda değil, bu pencerenin kademeli olarak azaltılmasından sonra.

Bu pencereyi yavaşlatan, kaynağımızın içeriği bu pencerenin boyutuna uyum sağlayacaktır. Yani her şey basit.

Ancak elbette bu şekilde eksi var. KADRA'ların nasıl göründüğünü göstermezler, bu da ayrı bir mobil versiyona sahip ve uyarlamaz. Örneğin VK.com ve OK.RU. Cihazdan onlara gittiğimizde, bizi M.VK.com ve M.K.R.U'yun mobil versiyonuna aktaracağız ..

Ve burada ana kutupsal. Bu Saits ekranlarının gösterdiği tek şey, benim tarafımdan açıklanan tarayıcı için yukarıdaki uzantıdır. Her şey burada iyi çalışıyor. Bu arada, eğer favori yollarınız varsa, onları gördüğüme sevindim. Öyleyse yorumları yaz).

Saygılarımla, Dmitry Kostin.

Tarayıcı penceresinin boyutunu değiştirmeyi bırak, tecavüz etmek için yeterli! Tartışmaya hazır, defalarca duydunuz. Peki, belki ve duymadım. Ancak, adaptif sitelerin geliştirilmesine profesyonel olarak meşgulseniz, ne olduğumu anlarsınız: herhangi bir DOM veya düzenleme CSS değişikliği ve tekrar tarayıcıyı ileri, geri, test etme ve yanlış bir şey izlemeye başlarsınız.

Hareketlerinizin amacı, çeşitli cihazların ekranlarını taklit etmektir.

Kurumsal ortamda, çoğu zaman test şirketi tarafından sağlanan çok sayıda gadget var. Benim emrimde işimde iPad, iPod, diğer tabletler, dizüstü bilgisayarların yanı sıra masaüstü monitörleri var. Eğer böyle bir lüksünüz yoksa, elinizde olanı kullanmak zorundasınız.

Neyse ki, çeşitli çapraz cihazları taklit eden öneren bir çevrimiçi araç kümesi var. Tabii ki, her birinin avantajları ve dezavantajları var, bu tür araçlara bakıyoruz.

Test için, aslında adaptif site pajamasonyourFeet.com'u seçtiler, site HTML5 şablonu, ücretsiz Egrappler'ten bazında inşa edilmiştir.

Duyarlı muyum?

Duyarlı, sitenizi 4 cihazda hızlı bir şekilde görüntülemenizi sağlayan çok basit bir araç. Hepsi - iOS ve geliştirici bunu bir site parçası ile açıklar. Genel olarak, hiçbir ayar, seçenek yok ve çok basit ve açıkça.

Kullanılabilir Boyutlar:

• masaüstü Monitör - 1600 x 992PX;
• dizüstü Bilgisayar - 1280 x 802PX;
• tablet - 768 x 1024PX;
• cep Telefonu - 320 x 480px.

Geliştiriciyi Citize: "Bu bir test aracı değil, gerçek cihazlarda test etmek son derece önemlidir. Ve bu araç hızlı bir şekilde ekran görüntüsü yapmaya ve müşteriye ne demek istediğinizi göstermeye yardımcı olacaktır. "

İki güzel cips var: aygıtları ekranda taşıma kabiliyeti ve aynı zamanda site testine bir bağlantıyı paylaşma fırsatı.

devasa

devicePonsive, duyarlıyım, minimum ayar ve seçenekle, basit olduğu gerçeğini duyuyorum. Mevcut tüm cihazlar hemen bir uzun sayfada görüntülenir. Tüm mevcut seçeneklerden, bu, başlık arka planını düzenleme ve logonuzu orada ekleyebilme ve ekran görüntüsünü paylaşmaya karar verdiğinizde kullanışlı olacaktır.

Cihazlar ve mevcut ekran çözünürlükleri.

• MacBook - 1280 x 800
• iPad portre - 768 x 1024
• iPad Portre - 1024 x 768
• Kindle Portre - 600 x 1024
• Kindle manzara oryantasyonu - 1024 x 600
• iphone portre - 320 x 480
• iPhone manzara oryantasyonu - 480 x 320
• Galaxy Portre - 240 x 320
• Galaxy Peyzaj Oryantasyonu - 320 x 240

Çoğu benzer alette olduğu gibi, kaydırma çubukları gerçek cihazlarda olmaz, bu gösterilecektir. Bu, duyusal olmayan cihazlarda kaydırma sağlamak için gerekli bir adımdır.

duyarlı Test

DevicePonsive gibi, duyarlı test, sitenizi çeşitli cihazlarda görüntüler. Ancak herkesi aynı anda görüntülemek yerine, kendinizin üst sayfa menüsünde gerekli cihazı seçersiniz. Bu arada, yakınlaştırma doğru bir şekilde doğru çalışıyor, bu daha az bir çözünürlüğün daha azını test etmesine izin veriyor.

Sitede 30 farklı izin mevcuttur, büyük bir masaüstü monitöründen "çılgın android" diymeden önce (adalet normal bir android olduğunu söylemeye değer).

Firefox tarayıcısına gelince, bu siteyle doğru çalışmıyor. Lütfen ekran görüntüsünün yeşil başlık ile arka plan içeriğinin beyaz alanı arasında bir kaydırıcı göstermediğini lütfen unutmayın.

duyarlı.is

Önceki iki alete çok benzer, ancak yanıtlayıcıları diğerlerinden ayıran bir şey var. Bir cihazdan diğerine geçiş sırasında bu pürüzsüz animasyon yanı sıra, sitenin gerçek alanını görüntüleme alanına girmeyen yarı saydam bir alanın yanı sıra.

Mevcut Cihaz Seçenekleri - Otomatik (siteyi görebileceğiniz gibi), bir masa üstü bilgisayar, peyzaj ve dikey yönlendirme, portre ve manzara akıllı telefon. Px'de keyfi boyutları belirleyin, ne yazık ki bu imkansızdır.

Ekranlar.

Ancak özellikler ve erişilebilir seçenekler, önceki hizmetlerden gelen ekranlarla ayırt edilir. 14 telefon ve 12 tablet burada, dikey ve yatay moduna geçmenin ayrı bir yoluyla sunulur. Sonuçlar, bir ızgarada kurallarla görüntülenir. Sağ veya alt kenarı çekerek keyfi bir çözünürlük belirlemek de mümkündür.

Bu sitenin ilginç bir özelliği, bir dizi cihaz için sitenizi yerel bir aygıt tarayıcısında gösteren bir "TrueView" seçeneği vardır.

Ne yazık ki, Firefox ve burada kaydırıcıyı gösteremedi. Beni suçlamaya gerek yok, Firefox benim favori tarayıcımdır, ancak böyle şeylerdir.

Screenfly

Ekranda belki de en işlevsel. Mevcut 9 cihazların tabletinden daha fazlası - 10 "dizüstü bilgisayarlar, en fazla 24" monitör, 5 tablet, 9 telefon, 3 televizyon izni ve keyfi çözünürlük. Burada dikey ve yatay moduna ayrı bir anahtar ekleyin ve ayrıca kaydırma gösterisi seçeneği. Bir düğmeyi kullanarak testin bir bağlantısını da paylaşabilirsiniz.

Her cihazın PX'de bir ekran boyutuna sahiptir ve tarayıcı pencerenizin gerçek boyutu sağ üst köşede görüntülenir.

Listelenen tüm avantajlar, bir kişi için değilse (Geliştirici Alıntı): "Sitenizi görüntülerken cihazları simüle etmek için bir proxy sunucusu kullanabilir. Proxy sunucusu, kullanıcı aracısı dizesini taklit eder, ancak bu cihazların davranışını değil. " ScreenFly, kullanıcı aracısı dizgisini test etmenizi sağlayan listeden tek servisdir.

Uygulamanızda sunulan araçları kullanıyor musunuz? Gelişen adaptif sitelerin sırlarını yorumlarınızı paylaşın.

P.S. Çeviri Hakkında Hatalar Kişisel olarak raporlayın.

Tüketicilere gittikçe daha fazla cihaz bulunur, insanlar daha sık internete tabletler ve akıllı telefonlarla girer. Arama motorları, farklı ekranların farklı çözünürlüğüne sahip "arkadaş" olan sitelere dikkat eder ve sadece bir masaüstüye değil. Adaptif, herhangi bir cihazda doğru görüntülenen bir tasarım olarak kabul edilir.

Ekim 2016'da Google, iade edildiğinde değişiklikleri açıkladı. Önceden, adaptif siteler, arama sonuçlarında mobil dost olarak ayrı bir simge ile işaretlendi. Önümüzdeki birkaç ay içinde, mobil (akıllı telefonlar, tabletler) ve masaüstü (bilgisayarlar ve dizüstü bilgisayarlarla) başlayacak arama Sonuçları. Bu nedenle, izleyicilerinizin temel kısmı mobil cihazlar kullanıyorsa - bölüm kaybediyorsunuz trafik aramaSitenin tasarımı akıllı telefonlar ve tabletler için uyarlanmazsa.

Mobil cihazlarda hangi siteye benziyor?

2015 yılında TNS Web Endeksi bir kurulum çalışması yapmıştır. Yaş alanında 60 bin Rus röportajı 12 ila 64 yaş arasındaydı ve internet kullanıcılarının% 64'ünün mobil cihazlardan geldiğini öğrendiler. Bu insan sayısının% 15'i, bilgisayarsız maliyet. Ama Yandex verileri.

Hepsinin çoğu bilgi ve içerik arıyor: kitaplar, müzik, oyunlar vb. Bu nedenle, adaptif bir tasarıma sahip olmak için bilgi ve eğlence siteleri arzu edilir. Ve ticari, eğer "son dakika" hizmetleri sunarsanız: bir çekme kamyonu veya çilingir, kilitlerin acil açılması, pizza teslimi veya suşi.

Popüler CMS için Sanal Hosting Siteleri:

Uyarlanabilirlik herhangi bir kaynak için gerekçesiz olmayacaktır, çünkü mobil izleyiciler büyür, düşüş beklenmez. Aynı araştırmaya göre, bazı kullanıcılar zaten masaüstleri olmadan. FAKAT arama robotları İade ederken "sakinleri olmayan" siteleri öğrenin. İstisna: Mobil trafik düşük hisseleri olan kaynaklar.

Sitenin mobil bir versiyonunu oluşturmak gibi farklı cihazlardan kullanıcıları memnun etmenin başka yolları da var. Ziyaretçiler için uygundur, çünkü site aşırı grafik ve içerik aşırı yüklenmedi. Webmaster kodda önemli değişiklikler katkıda bulunursa, ana siteye katılmayacaktır. Ancak önemli miktarda eksi var.

• İkinci sitenin düzeni, eski deseni adapte etmekten daha pahalı bir büyüklük sırası yapacaktır.
• Mobil ve standart kaynakların farklı adresleri, iki akıştaki trafiği kırar.
• İki projenin desteğinde daha fazla zaman ve paraya gider ..

Yapmak mobil versiyon Trafiğin ezici kısmı telefonlar ve tabletlerle birlikte geldiğinde gereklidir: sosyal ağ veya eğlence portali. Diğer durumlarda, uyarlamalı tasarım.

Bir tablet veya akıllı telefonda hangi siteye benziyor?

Çevrimiçi Hizmetler Araç Takımında Yandex.Vebmaster ve "Google" Özel programlarSiteyi analiz eden ve nerede sorunları arayacağınızı belirler.

Kendi gözlerinizle, sitenin mobil cihazların sahiplerine nasıl bakar? popüler BrowserAkh. İçin Firefox görünümü CTRL + Shift + M tuş kombinasyonu ile çağrılır.

İÇİNDE Google Chrome. F12'yi görüntülemek için basılmalıdır. Pencereyi uzatıyoruz veya istediğiniz izniyi numaralara ayarlıyoruz.

Belirli bir içerik yönetim sistemi için barındırmayı arıyorsanız - sayfamıza bakın.

Sitenin farklı izinlerde nasıl göründüğünü doğrulamak için çevrimiçi hizmetler.

Sitenin, çevrimiçi hizmetleri kullanarak kullanıcı ekranının farklı çözünürlüklerine nasıl göründüğünü kontrol edin.

• MOBİL - 320x480px;
• Tablet - 768x1024PX;
• Dizüstü bilgisayar - 1280x802px;
• PC - 1600x992PX.

İlk servisle karşılaştırıldığında, işlevsel daha iyidir. İzinleri gösterir:

• 10 mobil;
• 9 tablet;
• aynı sayıda adet ve dizüstü bilgisayar;
• Eğer bir İstenilen seçenek Hayır, parametreleri klavyedeki ayarlayın.

Android'in farklı sürümlerinde bir cep telefonundan baktığınızdan emin olun.

Benzer hizmetler Sadece taklit. Tasarım problemleriyle ilgili sorun olmadığı, ancak android cihaz Akan yerleşim düzeni. Yazı tipi ölçümleri, düğme boyutları, bazı CSS \\ HTML etiketlerinin gösterimi çeşitli işletim sistemleri ve tarayıcılar için spesifiktir.

Sitenin gerçek cihazlarda nasıl göründüğünü izlemek gerekir ve gerçekleştirmek mümkün müdür hedef eylemler. Sitenin harika göründüğü ve sipariş formu çalışmıyor.

Ancak her zaman elinizin altında değil, gerekli araçlar - Herkes iPad'lerin, iPhone'ların kullanımından ve Android'de bir kaç cihazın kullanılmasını sağlar. İsteğe bağlı olarak her şeyi arayın muhtemel SeçeneklerAncak, en azından size sık sık geldiğiniz cihazları kontrol etmek daha iyidir.

Böyle bir şey yoksa, istediğiniz modeli bir arkadaşımdan veya en yakın mağazada test edin. Aksi takdirde, trafiğin önemli bir bölümünü kaybediyorsunuz. Sitenin izleyicisi hakkında bilgi, aynı Yandex.Metrics kullanarak en popüler izinleri ve işletim sistemlerini elde ediyoruz.

Sayfa kullanımı mobil tarayıcılar Günlük büyümek. İstatistiklere göre, internet trafiğinin yaklaşık% 32'si cep telefonlarına düşer ve tablet bilgisayarlar. Bu, mobil siteleri bekleyen her iki tüketici anlamına gelir.

Makalede gezinme:

Siteyi test etmeden önce test etmek, tüketicilerin imha edilmesinde çok çeşitli mobil cihazlar nedeniyle son derece gerekli aşamadır. Ve böyle esnek bir tekniğin kullanımı bile bu ihtiyacı ortadan kaldırmaz. Mobil cihazlar yavaş yavaş sabit bilgisayarları değiştirmeyi - aşağıdaki grafiğe bakın, son 2 yılda mobil trafiğin ne kadar büyüdüğünü görün?

Mobil siteleri kontrol etmek için birkaç farklı yaklaşım var. Aşağıdaki temel test yöntemleri, en az tercih edilene kadar en etkili olanlardan sırayla yerleştirilmiştir.

1. Gerçek mobil cihazlarda test

Siteyi gerçek cihazlarda kontrol etmek en iyisidir, çünkü birçok etkileşim nüansı taklit edemez. Etkileşim deneyimi (UX) etkiler tüm hat Faktörler: Ağa dengesiz bağlantı, piksel yoğunluğu, sayfadaki aktif elemanların nispi boyutu ve gerçek zamanlı Yükleme sayfası. İdeal olarak, site hepsinde kontrol edilmelidir. mobil cihazlar.

Doğal olarak, tam test Neredeyse pratik olmayan, çünkü çok zaman ve kaynak gerektiriyor. Optimum çıktı, özellikle müşteri odaklı iş için önemli olan test seti için birkaç mobil cihazın elde edilmesi olacaktır. Test kiti genellikle web sayfalarını görüntülemek için kullanılan en popüler cihazlardan oluşur. Bu yaklaşım izin verir fiziksel denemeler Gerçek koşullarda ve siteye kullanıcının gözüyle bir göz atın. Test kiti için cep telefonlarının satın alınması proje bütçesine uymuyorsa, kendi akıllı telefonunuzu kullanın. Büyük olasılıkla, akıllı telefonunuz üzerinde çalışacak veya en azından çoğu kullanıcının analiz edilen siteyi gördüğü fikri verecek. Hangi mobil cihazların siteyi ve diğer cihazları kontrol etmeleri için akrabalar, meslektaşlar ve arkadaşlar olduğunu sordu.

2. ios simülatörü ve Android emülatörünü kullanma

Bu demir değiştirmek imkansızdır, ancak program emülatörleri en iyinin olmaması için uygundur. İOS ve Android için emülatörler çoğunlukla yerel uygulamaları test etmek için tasarlanmıştır. Bununla birlikte, siteyi gerçek bir cihazda görünecek olan siteyi adil bir şekilde çoğaltan varsayılan mobil cihazların varsayılan tarayıcılarını sağlarlar. İfadeyi oldukça doğru olduğunu vurguluyoruz, çünkü emülatörler ağ bağlantısının durumunu, indirme sayfalarının hızını, aktif elemanların göreceli boyutlarını ve yalnızca gerçek koşullarda gözlenebilecek diğer nüansları dikkate almadığından vurgu yapıyoruz. Bununla birlikte, görselleştirme araçları bu cihazlara işlevsel olarak eşdeğerdir ve kontrol kanalları uyumluluğu ile iyi başa çıkmayın.

• Entegre Xcode Geliştirme ortamında verilen iOS simülatörü, Sitenin ekranını iPhone ve iPad'de simüle eder.

İOS Simülatörü, entegre XCODE geliştirme ortamına girer. İlk önce xcode'u platformdan yükleyin Uygulama mağazası. . XCODE menüsüne gidin ve XCODE\u003e Aç Geliştirici Aracı\u003e iOS Simülatörü'nü seçin. Ne yazık ki, araç yalnızca Mac OS işlemi ile uyumludur, bu yüzden windows kullanıcıları Veya Linux başka bir seçenek aramak zorunda kalacak.

Android emülatörü Android SDK uygulama geliştirme ortamında gelir. detaylı bilgi Hakkında Android Emulator bulunur.

3. Tarayıcı testi

Toplanan bir test kiti almazsanız veya yazılımla ilgilenirseniz İOS emülatörleri Ve Android, diğer yöntemleri kullanabilirsiniz.

Browserstack çevrimiçi hizmeti, test siteleri için sabit ve mobil cihazları taklit eder, bu, farklı cihazlarda ve farklı tarayıcılardaki siteleri test etmek için uygun bir çevrimiçi araçtır.

4. Servis sorumlusu.

Test siteleri gerçek mobil cihazlarda veya yüksek kaliteli emülatörler kullanılmalıdır. Herhangi bir nedenle belirtilen yöntemler uygulanamazsa, Webmaster açılır büyük miktar Diğer seçenekler, test etme, aslında, tarayıcı penceresinin boyutunda basit bir değişikliğe göre. Bu görevi çözmek için birçok akıllı araç geliştirilmiştir, ancak en etkili olanı sorumlu olarak kabul edilir.

Sorumluluk sitenin boyutunu değiştirir belirtilen parametreler. Alet, adaptif tasarım davranışını hızla doğrulamak için kullanışlıdır, ancak gerçek cihazlardaki testlerin yerini almaz.

Siteye gidin ve analiz edilen sitenin URL'sini girin. Hizmet, sitenizi farklı ekran çözünürlüklerinde popüler cihazlarda göründüğü için görüntüler. Araç hızlı yüzey kontrolü için faydalı olabilir. Bununla birlikte, tam testin gerçek cihazlarda ve hatta yerine tam test edemiyor. yazılım EmülasyonuÇünkü takım grafik motorunda çalışır aktif tarayıcı. Başka bir deyişle, servis siteleri görüntülemek için mobil tarayıcıların dikilmemesidir. Aslında, sonuç tam olarak aynıdır. manuel değişim Tarayıcı penceresi boyutu.

5. Tarayıcı penceresinin boyutunu değiştirme

Sitede bir masaüstü bilgisayarda çalışma sürecinde, tasarımcılar ve geliştiriciler genellikle tarayıcı penceresinin boyutunu değiştirerek uyarlanabilir tasarım öğelerinin davranışını kontrol eder. Bu işlem, dili "test" ile aramaya başlamaz, ancak reddetmek mantıklı olmadığıdır. Adaptif tasarımla ilişkili kodun parçaları üzerinde çalışma sürecinde, hızlı kontrol Tip "Anahtarlamalı - Aranan - Anahtarlı Geri" değerlendirmeye yardımcı olur değişiklikler yapıldı. Bununla birlikte, bu teknik, diğer test yöntemleriyle bile karşılaştırılamaz: boyutundaki hata, farklı grafik motorları, bir ağ gecikmesinin eksikliği, vb. Bu yöntemin diğer test seçeneklerini değiştirmek için eşdeğer olması için çok fazla dezavantaja sahiptir.

Ve seni nasıl test ediyorsun?

Web sitelerinin geliştirilmesine dahil olan insanlar, genellikle farklı ekran çözünürlüklerinde ve web tarayıcılarında sitelerin nasıl görüntüleneceğini kontrol etmeniz gerekir. Farklı ekran çözünürlüklü çeşitli cihazlarda sitenin ekranını izlemek zordur. Neyse ki, bazı İnternet siteleri, farklı ekran çözünürlükteki sayfa düzenini kontrol etmek için mükemmel bir araç sunar.

Bu web siteleri çıktıdır Ön izleme Site URL'sini girerek Web sayfası. Web sayfanızın farklı ekran çözünürlüklerinde nasıl görüneceğini görmek istiyorsanız, bu ücretsiz kaynakları, farklı ekran boyutlarıyla uyumluluğu kolayca kontrol ederek deneyebilirsiniz.

Bu sitelerin bazıları, masaüstü bilgisayarların, dizüstü bilgisayarların, TV'lerin, tabletlerin ve mobil cihazların, diğerleri, diğerleri manuel olarak etkinleştirebilme ve sayfa düzenini belirli bir çözünürlükte kontrol etme yeteneğini sunar.

Her ne kadar tüm araçlar basit ve kullanımı kolay olmasına rağmen, kendi kendi seti Birbiriyle karşılaştırıldığında avantajlar.

İlk etapta ulaşılabilir - çok İyi hizmet Sitenin çevrimiçi testleri için çeşitli izinlerde açık ve sevimli kullanıcı arayüzü. Sitede masaüstü bilgisayarlar, netbook, dizüstü bilgisayar, tabletler, televizyonlar dahil olmak üzere çeşitli ekran çözünürlük seçenekleri bulacaksınız.

Tam çözünürlüğü bilmiyorsanız, cihazın adını doğrudan seçmek mümkündür. Böylece, açılır listeden Kindle, Google, Samsung, Motorola, Apple'ı seçebilirsiniz ve sayfa düzenini uygun çözünürlükte kontrol edebilirsiniz.

Ek olarak, ScreenFly kurmanızı sağlar standart olmayan boyut Piksellerde ekran ve sayfanıza başvurmanıza izin verin. Böylece web sayfalarını hemen hemen her çözünürlükte kolayca kontrol edebilirsiniz.

Ek olarak, ekranı döndürebilir, Web sayfasını etkinleştirebilir veya devre dışı bırakabilirsiniz, bir Web sayfasını test etmek için bir proxy sunucusu kullanın.

Diğer ücretsiz Çevrimiçi kaynakSiteyi farklı izinlerde kolayca kontrol edebilirsiniz. Sitede bulacaksınız İyi aralık Devora ot masaüstü bilgisayar, dizüstü bilgisayar, tablet smartphone. Ek olarak, aynı zamanda izni elle girmesine ve sayfa düzenlerini kontrol etmesine de izin verilir.

Ek olarak, tarayıcı sınırları ve kontrolleri için bir yer ve önizleme penceresinde görev çubuğunun yanı sıra bir yer bırakan "tarayıcıda" bir seçenek var.

Sonraki gelir, diğeri Ücretsiz araçSiteyi farklı izinlerde test etmenizi sağlar. Önerilen izin seçeneklerinden birini seçmek veya siteye kendi boyutlarınızı girmek mümkündür.

Bu site iki tane sunuyor farklı seçenekler Ekran: Windows ve Çerçeveler. Pencere varyantı, düşük ekran çözünürlüğü ile iyi birleştirilir, ancak seçilen çözünürlük daha fazla boyut Ekran, ekran boyutuyla uyumluluğunu doğrulamak için çerçeve seçeneğini kullanabilirsiniz.

ayrıca ekranınızın geçerli çözünürlüğünü de belirler ve bunu tanımak için görüntüler.

Site sayfalarını çeşitli boyutlarda test etmenizi sağlayan başka bir web aracı. Site en iyi şekilde çalışır Internet Explorer. ve seçilen çözünürlükte Web sayfalarını görüntüler. Ancak, izinlerin listesi çok sınırlıdır. Bu, web sayfalarını yalnızca 800 × 600, 1024 × 768, 1280 × 960, 1440 × 900, 1600 × 1200, 1680 × 1050 × 900, 1600 × 1200, 1680 × 1050 × 1920 × 1200 dahil olmak üzere kontrol edebileceğiniz anlamına gelir.

Diğer benzer web sitelerinde olduğu gibi birçok seçenek sağlamaz, ancak bu seçenek denemeye değer.

Günün her zaman, sevgili arkadaşlarım ve blogumun misafirlerim. Sadece üç yıl önce böyle bir şeyi adaptif bir düzen ya da mobil olarak duymadığımı hatırlıyorum ...

Görmek gerekli site farklı ekran çözünürlüklerinde neye benziyor?. Özellikle site mobil cihazlara adapte olursa, yani Farklı ekran çözünürlüklerine doğru dönüştürür. Ve bu yazıda, siteyi farklı ekran çözünürlüklerinde kontrol edebileceğiniz çeşitli yollara bakacağız.

Bu neden kullanışlı olabilir?

Örneğin, sitenizin istatistiklerine göre, analiz edilebilir - hangi ekran çözünürlükleri ve hangi yüzde olarak sitenize kullanılan ziyaretçiler kullanılır:

Daha sonra sitenizin veri izinleri olan cihazlarda nasıl görüntülendiğini görebilirsiniz. Geliştirdiyseniz / geliştirdiyseniz uyarlanabilir sürüm Web sitesi, - Sitenin farklı izinlerde nasıl göründüğüne bakarken, "Bazı detaylar geliştirici ile tartışılabilir.

Ayrıca, sitenizde zaten belirli bir adaptif şablon varsa, sitenin farklı izinlerde nasıl göründüğünü ve bir karar vermek için nasıl görüneceğini görebilirsiniz. bu şablon Veya başka birini arayın.

Farklı ekran çözünürlüklerinde bir site görüşü yapmanın birçok yolu vardır. Örneğin, sitenin ana çözünürlüklü ekranları hiç görülebilir basit fonlar Windows bölümündeki ekran çözünürlüğünü değiştirerek Ekran Ayarları:

Fakat, bu method Tamamen uygun değildir, ayrıca sitenin yalnızca bilgisayar ekranlarının temel izinleriyle nasıl göründüğünü görmeyi mümkün kılar.

Diğer farklı ekran çözünürlüklerinde siteyi görüntüleme yöntemi Dahili tarayıcı yeteneklerini ver. Örneğin, Google Chrome'da, istediğiniz siteye göre, sağ tık Fare ve seç (veya resimde gösterildiği gibi, tuş kombinasyonunu kullanın):

Görünür ek panel Site kodları ile, farklı çözünürlükte saha görüntülemeyi etkinleştirilecek yerlerde, aşağıdaki resimde gösterildiği gibi özel bir sekmeye (1) tıklayın.

Farklı mobil cihazları seçmek için aşağı açılır menüyü (2) kullanırız. Sağda, seçilen cihazdaki ekran izinlerini de gösterir. Aygıt ekranını genişletmek için, ilgili düğmeyi kullanın (3):

Ve dahası uygun yol Farklı ekran çözünürlüklerinde saha kontrolleri özel Çevrimiçi hizmetler.

Site ekran çözünürlüğü ekranda görüntüleme

Bu en uygun olanlardan biri (aynı zamanda - ücretsiz) şu an Siteyi yalnızca ana, ancak genel olarak farklı ekran çözünürlüklerinde hızlı bir şekilde görebileceğiniz hizmetler!

Web sitelerinin geliştirilmesine dahil olan insanlar, genellikle farklı ekran çözünürlüklerinde ve web tarayıcılarında sitelerin nasıl görüntüleneceğini kontrol etmeniz gerekir. Farklı ekran çözünürlüklü çeşitli cihazlarda sitenin ekranını izlemek zordur. Neyse ki, bazı İnternet siteleri, farklı ekran çözünürlükteki sayfa düzenini kontrol etmek için mükemmel bir araç sunar.

Bu web siteleri, Site URL'sini girerek bir web sayfası önizlemesi gösterir. Web sayfanızın farklı ekran çözünürlüklerinde nasıl görüneceğini görmek istiyorsanız, bu ücretsiz kaynakları, farklı ekran boyutlarıyla uyumluluğu kolayca kontrol ederek deneyebilirsiniz.

Bu sitelerin bazıları, masaüstü bilgisayarların, dizüstü bilgisayarların, TV'lerin, tabletlerin ve mobil cihazların, diğerleri, diğerleri manuel olarak etkinleştirebilme ve sayfa düzenini belirli bir çözünürlükte kontrol etme yeteneğini sunar.

Tüm araçlar basit ve kullanımı kolay olmasına rağmen, birbirleriyle karşılaştırıldığında kendi avantajları vardır.

İlk başta, net ve güzel bir kullanıcı arayüzüne sahip olan çeşitli izinlerde sitenin çevrimiçi testleri için çok iyi bir servis yapabilirsiniz. Sitede masaüstü bilgisayarlar, netbook, dizüstü bilgisayar, tabletler, televizyonlar dahil olmak üzere çeşitli ekran çözünürlük seçenekleri bulacaksınız.

Tam çözünürlüğü bilmiyorsanız, cihazın adını doğrudan seçmek mümkündür. Böylece, açılır listeden Kindle, Google, Samsung, Motorola, Apple'ı seçebilirsiniz ve sayfa düzenini uygun çözünürlükte kontrol edebilirsiniz.

Ek olarak, ScreenFly, piksellerde standart olmayan bir ekran boyutu kurmanıza ve sayfanıza başvurmanıza olanak sağlar. Böylece web sayfalarını hemen hemen her çözünürlükte kolayca kontrol edebilirsiniz.

Ek olarak, ekranı döndürebilir, Web sayfasını etkinleştirebilir veya devre dışı bırakabilirsiniz, bir Web sayfasını test etmek için bir proxy sunucusu kullanın.

Başka bir ücretsiz çevrimiçi kaynak, siteyi farklı izinlerde kolayca kontrol edebileceğiniz. Sitede bir masaüstü bilgisayardan, bir dizüstü bilgisayardan, bir akıllı telefona tabletten bir cihazın iyi bir yelpazesini bulacaksınız. Ek olarak, aynı zamanda izni elle girmesine ve sayfa düzenlerini kontrol etmesine de izin verilir.

Ek olarak, tarayıcı sınırları ve kontrolleri için bir yer ve önizleme penceresinde görev çubuğunun yanı sıra bir yer bırakan "tarayıcıda" bir seçenek var.

Sonra, siteyi farklı izinlerde test etmenizi sağlayan başka bir ücretsiz araç gelir. Önerilen izin seçeneklerinden birini seçmek veya siteye kendi boyutlarınızı girmek mümkündür.

Bu site iki farklı ekran seçeneği sunar: Windows ve Çerçeveler. Pencere varyantı, düşük ekran çözünürlüğü ile iyi bir şekilde birleştirilir, ancak, seçilen çözünürlük ekran boyutundan daha büyükse, ekran boyutuyla uyumluluğunu kontrol etmek için çerçeve seçeneğini kullanabilirsiniz.

ayrıca ekranınızın geçerli çözünürlüğünü de belirler ve bunu tanımak için görüntüler.

Site sayfalarını çeşitli boyutlarda test etmenizi sağlayan başka bir web aracı. Site Internet Explorer ile en iyi şekilde çalışır ve seçilen çözünürlükte web sayfalarını görüntüler. Ancak, izinlerin listesi çok sınırlıdır. Bu, web sayfalarını yalnızca 800 × 600, 1024 × 768, 1280 × 960, 1440 × 900, 1600 × 1200, 1680 × 1050 × 900, 1600 × 1200, 1680 × 1050 × 1920 × 1200 dahil olmak üzere kontrol edebileceğiniz anlamına gelir.

Diğer benzer web sitelerinde olduğu gibi birçok seçenek sağlamaz, ancak bu seçenek denemeye değer.

Son liste, sayfa sayfasını kontrol etmek için 9 farklı izin sunan ücretsiz bir çevrimiçi araç olan bir Kaynak Testsize.com'dur: 240 × 380, 640 × 480, 800 × 600, 1024 × 600, 1024 × 768, 1280 × 600, 1280 × 1024, 1366 × 768 ve 1920 × 1024.

Ek olarak, ekran boyutlarını manuel olarak da girebilir ve web sitesini ayrı bir pencere açıklığında kontrol edebilirsiniz. (Açılır pencere). TestSize.com uygun ve kullanımı kolaydır.

Yorumunuzu bırakın!

Arama motorları dikkate alınır davranış faktörleri Hem masaüstü sürümünde hem de mobil cihazlarda, siteyi geliştirirken (veya yeniden tasarlandığında) bu gerçeği dikkate almak gerekir.

Daha önce, ne var olan uygulama seçeneklerini söyledim. Aynı makalede, sitenin düzenini kontrol etmek için hangi araçlarda kullandığım hizmet ve hizmetleri size söyleyeceğim.

Benim tarafından açıklanan tüm seçenekler ücretsizdir ve bu nedenle herkes için erişilebilir. Sitenizi daha doğru hale getirmek için kullanın.

1. Viewport Resizer uyarlanabilirlik aracı

Onlar için kolaydır - test sitesine bir bağlantı eklemeniz gerekir. Servis sayfasındaki tek alana ve korumanın hatalarını bulun.

İzinler kümesi küçüktür (240 px (ilginç, başka birinin böyle bir ekran ve internet erişimiyle bir telefonu var mı? :)) 1024 pikgeye kadar), ancak akışkanlaştırılmış test için alet uygun olacaktır. Hizmet, örneğin, sitenin doğru çalışmalarında kendinden emin olduğunuzda, ancak bazıları ayrı sayfa İlk kez çalıştığınız kişiyi doldurursunuz. Emin olmak istediğiniz mantıklı doğru ekran Tüm cihazlardaki sayfalar. Matt'in Aracı Kersley yapmasına izin verecek.

3)

Bir dizi öykünmüş cihazlar küçüktür ve uzun süre güncellenmedi. Liste iPhone 3 ila 6, çift samsung Modelleri, Blackberry, lg.

Hizmette belirtmeniz gerekir:
- Sayfanın adresi kontrol edildi;
- Yönlendirme (dikey veya yatay (dikey / manzara)):
- Terminal boyutu (iki seçenek vardır: "Ekran Boyutu" (katmanınızı kontrol ettiğiniz izninizin iznine bağlıdır) veya " gerçek boyut»Taklit ettiğiniz cihazlar (örneğin, BlackBerry)).

Enstrümanda her cihazın ekranında orada dikey şerit Kaydırın, böylece sayfanın tamamını görüntüleyebilir ve göz hataları olup olmadığını belirleyebilirsiniz:

Hala çok sayıda çevrimiçi hizmet var, ancak listelenen iş prensibinden farklı değiller. Bazı araçlar yalnızca fonksiyonlar kümesi ile aşağı.

Cihazların yüklendiğinde komut dosyaları tarafından belirlenmesi bir şans var. basit değişiklik Genişlik çok az olacaktır. Tarayıcı penceresini genişlikte sıkarken sayfayı güncellemeniz ve düzeni izlemeniz gerekir.

Ayrıca, bu hizmetlerden birinde her zaman bir kilit eğrisi olmadığını da unutmayın. Sitenizde gerçek bir cihazda eşlemede bir sorun olduğu anlamına gelir. Bu nedenle, siteyi çeşitli şekillerde ve mevcut tüm gerçek cihazlarda kontrol etmeniz gerekir.

Atölyeyi kabul ederek, listeden en az 1-2 araç kullanın. Bu durumda, hepsi sitenizden memnun kalacak: hem sizin hem de müşterileriniz ve arama motorları.