Desain Web Responsif vs. Pengendalian-Agen Pengguna

Fitur mediapermintaan CSS3 telah menyebabkan banyak kemungkinan menarik dalam hal mengembangkan situs web yang menyesuaikan dengan berbagai ukuran layar dan perangkat.

Namun, dalam praktiknya, saya mulai memahami bahwa mediafitur permintaan CSS3 , dan seluruh gerakan "Desain Web Responsif", mungkin tidak memenuhi janjinya.

Masalah yang saya lihat adalah bahwa, pada akhirnya, pengembang web lebih peduli tentang apakah pengguna mereka melihat konten melalui Desktop, Tablet, atau perangkat Mobile. Tetapi CSS3 hanya menyediakan sarana untuk mendeteksi resolusi layar . Secara teori, mendeteksi resolusi layar sepertinya cara yang bagus untuk menyesuaikan berbagai perangkat yang berbeda. Namun dalam praktiknya ...

Misalkan kita memiliki fungsi Javascript sederhana yang hanya menampilkan lebar layar:

function foo()
{
   alert(screen.width);
}

Di Blackberry Touch saya, output ini:

Di Samsung Galaxy saya, output ini:

Jadi ... um, pada titik ini, resolusi ponsel pintar umum semakin dekat dengan resolusi tingkat Desktop. Kemampuan untuk mendeteksi apakah pengguna melihat situs web Anda melalui smartphone, tablet, atau desktop, tampaknya semakin sulit jika yang Anda lakukan hanyalah resolusi layar.

Ini membuat saya mempertanyakan seluruh kebijaksanaan di balik seluruh gerakan "Desain Web Responsif" CSS3 berdasarkan pertanyaan media. Tampaknya mediafitur kueri lebih cocok untuk beradaptasi dengan jendela browser yang mengubah ukuran pada layar Desktop, daripada berbagai perangkat seluler.

Teknik lain yang mungkin untuk mendeteksi perangkat seluler atau tablet adalah menggunakan deteksi fitur, dengan memeriksa apakah ontouchstartacara tersebut didukung. Tetapi bahkan ini menjadi semakin tidak dapat diandalkan karena banyak layar Desktop mulai mendukung sentuhan.

Pertanyaan: Jadi ... sebagai pengembang web, jika saya tidak bisa mengandalkan RWD atau deteksi fitur, apakah sniffing agen pengguna (yang terkenal tidak bisa diandalkan seperti biasanya) benar-benar merupakan pilihan terbaik untuk mendeteksi perangkat seluler?

web-development javascript css

— Channel72
sumber

Jika tujuan dari Desain Web Responsif adalah (seperti yang diklaim Wikipedia ) "membaca mudah dan navigasi dengan minimal mengubah ukuran, panning, dan menggulir", lalu mengapa Anda peduli apakah itu desktop atau mobile? Yang penting adalah resolusi layar perangkat dan ukuran layar, bukan jenis perangkat apa itu. Tidak?

— ruakh

Saya kira apa yang saya katakan adalah bahwa koneksi antara "resolusi layar" dan ukuran layar aktual (mis. Sentimeter / inci dari lebar layar) menjadi semakin sementara.

— Channel72

Saya pikir Anda seharusnya melakukan sesuatu dengan kueri media lebar perangkat karena lebar / resolusi menjadi semakin tidak akurat terutama dengan kerapatan piksel berbagai tampilan, misalnya perangkat "Retina" Apple. Jadi, jika lebar perangkat berada dalam lebar umum untuk perangkat seluler, maka Anda menunjukkan tata letak yang berbeda. Untuk pengguna tablet / desktop saya hanya menunjukkan tata letak yang sama yaitu lebar 1024px.

— zuallauz

@zuallauz, bukankah dukungan untuk hal yang device-widthsangat buruk?

— Channel72

Mengapa tidak menggunakan unit em? Dengan cara itu, konten bergeser berdasarkan ruang teks yang tersedia ...

Jawaban:

Berhentilah mengkhawatirkan perangkat tertentu.

Kemampuan untuk mendeteksi apakah pengguna melihat situs web Anda melalui smartphone, tablet, atau desktop, tampaknya semakin sulit jika yang Anda lakukan hanyalah resolusi layar.

Itu ini semakin sulit untuk mendeteksi melalui resolusi layar, dan hanya akan mendapatkan lebih keras karena lebih banyak perangkat memasuki pasar, tetapi tujuan kueri media tidak mendeteksi perangkat types.What pertanyaan media baik di adalah membuat tweak untuk desain Anda saat tidak lagi menyenangkan untuk digunakan pada dimensi saat ini. Jika situs mulai berantakan pada lebar 550px, maka tidak masalah jika ada perangkat dengan dimensi tersebut atau tidak: Anda mengatur breakpoint di sana.

Ini sama dengan deteksi fitur. Jika perangkat mendukung sentuhan, lalu apa bedanya jika itu perangkat seluler atau monitor berukuran dinding di masa depan? Either way peningkatan perangkat tambahan mungkin akan berguna.

Menghirup agen-pengguna - seperti yang telah Anda nyatakan - sama sekali tidak bisa diandalkan. Saya bisa mengubah string Agen-pengguna saya menjadi kutipan Shakespeare jika saya benar-benar menginginkannya. Apa yang akan diputuskan situs Anda tentang peramban saya?

Agen pengguna juga membutuhkan banyak pekerjaan untuk menangani semua kemungkinan. Apakah Anda punya satu untuk Firefox di android? Chrome di iOS? Lumba-lumba di Froyo? Peramban WiiU? Browser yang sangat terbatas pada ponsel berfitur LG lama saya? Lynx? IE 13? Tautan? IceWeasel? Browser Blackberry playbook? Bagaimana Anda memberi tahu perbedaan antara Opera berjalan di tablet dan opera berjalan di telepon?

Daftar ini hanya dapat bertambah seiring berjalannya waktu.

— Mike Gossmann
sumber

Nah, tata letak 1 kolom biasanya cocok untuk smartphone. Untuk tablet, Anda dapat menggunakan tata letak 2 kolom atau bahkan 3 kolom, dan untuk Desktop biasanya 3 kolom berfungsi dengan baik. Apapun, jumlah kolom ideal yang Anda tampilkan biasanya adalah fungsi dari kemampuan biologis mata manusia , bukan resolusi layar. Maksud saya adalah akan lebih baik jika ada korelasi yang lebih erat antara resolusi layar dan kemungkinan bahwa manusia biasa akan dapat dengan mudah memindai situs Anda secara visual. Setidaknya, CSS3 tampaknya mengasumsikan korelasi seperti itu.

— Channel72

Seharusnya memang ada. Pixel CSS seharusnya didefinisikan menggunakan sudut dan jarak, bukan piksel fisik. Namun, banyak produsen mengabaikannya dalam pengaturan default.

— Mike Gossmann

@ Channel72 Tata letak 1 kolom cocok untuk lebar layar sempit apa pun . Tidak masalah apakah lebar layar sempit karena itu adalah peramban ponsel cerdas, atau peramban desktop di jendela ukuran-ulang pada monitor raksasa. Desain web yang responsif berupaya mengakomodasi semua skenario dengan tepat, terlepas dari agen pengguna.

— Eric King

Bagaimana jika Anda akan menyajikan tampilan yang sama sekali berbeda untuk pengguna seluler. Bagaimana dengan mencegah penggunaan seluler mengunduh semua data yang tidak relevan yang diperlukan untuk pengguna desktop. Agen pengguna adalah cara untuk pergi ...

— John

Agen pengguna juga berbohong. Jika Anda Google sekitar, Anda akan menemukan daftar agen pengguna vs kenyataan. Jadi ini masalah. Beberapa orang menggunakan pengaturan dpi untuk menentukan perangkat apa atau apa itu.

— rampok
sumber

Jika seseorang memiliki kebutuhan untuk memberikan data palsu dalam data agen pengguna, ia akan mendapatkan versi standar dari situs web ...

— John