Her tarayıcının kendi damgası vardırBu sayede sitemizde bir isteğin nereden geldiğini ve hangi tarayıcıdan yapıldığını tespit edebileceğiz, çok iyi bildiğimiz gibi, Internet Explorer tarayıcısı web geliştiricilerine her zaman baş ağrısı getirdi (son zamanlarda Geliştirilmiş), çünkü sizi tanımlayabileceğiz ve bu küçük sorunları çözmek için alternatif kurallar göstereceğiz.
Bize hizmet etmek için mi?Her gün milyonlarca insanın girdiği, ancak hepsinin aynı tür cihazlardan yapmadığı Facebook gibi bir web sitemiz olduğunu hayal edin, masaüstü bilgisayarlarından, bazılarının tabletlerinden, bazılarının ceplerinden girenler var. vb. Her cihazın bir tarayıcısı (veya birkaçı) vardır ve bir aracısı vardır, eğer onu tanımlayabilirsek içeriği uygun bir şekilde sunabiliriz, çünkü görüntü herkes için aynı değildir, her cihaz bir şekilde görülecektir, ve her tarayıcı kuralları farklı bir şekilde yorumlayabilir (bu gitgide azalıyor olsa da).
Her tarayıcının, onu tanımlamamıza izin veren bir aracısı olduğunu tartıştık, aşağıda kısa bir bilgi verilmiştir. Tarayıcı aracısını almak için JavaScript kodu nerede kullanılır:
kullanıcı aracısı alKomut dosyası kodu, kolaylık sağlamak için HTML'ye yerleştirilmiştir. Önceki kodu Google Chrome tarayıcısında açarsak aşağıdakileri görürüz:
BÜYÜT
Ve şimdi bunu Internet Explorer'da yaparsak:
BÜYÜT
Önceki 2 yakalamayı almak için Windows'tan açıldığını doğruladınız, Linux'ta Mozilla Firefox'tan açarsak aşağıdakileri görürüz:
Sunucu için bir dilde bir kod istiyorsanız, aşağıda bir kod görmek için bir koddur. PHP'de ajan nasıl edinilir, kullanıcının JavaScript'i devre dışı bırakmasının mümkün olduğunu unutmayın:
Şimdi bizi en çok ilgilendiren şeye geçeceğiz, bunun için sayfamızda şimdiye kadar tartıştığımız bir örneğine bakarak başlayacağız: Solvetic.
Solvetic'i Kontrol Etme
Solvetic'e bilgisayarımızdan girersek, Google Chrome tarayıcısını kullanarak aşağıdaki yönü göreceğiz, eksiksiz, bir bakışta her şeyi geniş, giriş yapmak ve kaydolmak için alan görüyoruz:
Ama bir Android cep telefonundan Google Chrome'dan girersek, içeriğin tamamı ekrana girmiyor tabii ki, dikkate alınması gereken bir şey, bölümlerini görmek için parmağınızı kaydırmak zorunda kalmak pek hoş değil. ekran (neyse ki bugünlerde böyle birkaç site var), aşağıda Solvetic'in mobil cihazlarda nasıl göründüğünün görüntüsünü bırakıyorum:
Gördüğümüz gibi ekrana uyum sağlıyor, artık menüler üstte, sol tarafa (3 çubuk) tıklarsak yazılara, öğreticilere vb. gitmek için seçenekleri göreceğiz.
Ve sağdaki ikona (açma/kapama butonunun yönü) tıklarsak, giriş yapma veya kayıt olma seçeneklerine sahibiz.
Şimdi, bizi ziyaret eden cihaza bağlı olarak, bir sayfanın sunulmasını sağlamanın bir yolunu göreceğiz.
Sonuç nasıl elde edilir?
Bu sonuca ulaşmanın birkaç yolu vardır, doğrudan uygulamaya yerleştirilmiş komut dosyaları vardır veya Bootstrap gibi çerçevelerimiz de vardır, ancak Nginx'ten de benzer bir sonuç elde edebiliriz, çünkü tarayıcı aracısını tanıyarak yeniden yazma yapabiliriz. ve kullanıcıya gördüğü URL'yi değiştirmeden uygulamanın başka bir bölümüne gönderir.
Nginx'i tanımak istiyorsanız, indirebileceğiniz bir link bırakıyoruz:
Bunu başarmak için önce tarayıcı aracısını tanımlamalıyız, eğer kuralı girmek istediğimizlerden biriyse basit bir koşullu kullanırız ve kuralı ona uygularız, tüm bunları konum bloğumuzda yaparız.
Bunu başarmak için aşağıdaki örnek koda bakalım, ne kadar kısa olduğunu görebilirsiniz:
konum / {if ($ http_user_agent ~ * '(iPhone | iPod)') {yeniden yazın ^. + http://m.example.com/$uri; }}}Kodda gördüğümüz gibi, tarayıcı aracısını tanımlarız, belirlediğimiz kişiye (bu durumda iPhone veya iPod) tekabül ederse, bir yeniden yazma yaparız, bu, mantığımızın gerektirdiği kadar geniş veya spesifik yapılabilir, çünkü örneğin tek bir koşulla anlamak daha kolaydır.
Gördüğümüz gibi, tarayıcı aracısını tanımlamak oldukça kolaydır ve bunu lehimize kullanmak daha da kolaydır, daha önce de belirttiğimiz gibi, kullanmak için ne yapmak istediğimize dair net bir fikre sahip olmalıyız. araçlar ve istenen faydayı elde edin.
Öğreticiyi bitirmek için, duyarlı tasarım kullanarak web sayfanızın görünümünün daha fazla komplikasyon olmadan cihazların ekranına uyum sağlamasını sağlayacağınızı belirtin.
