YouTube pada layar vertikal



Ya, saya orang yang aneh, saya mengakuinya sepenuhnya. Saya memiliki monitor vertikal di komputer rumah saya. Saya menulis dan membaca banyak dokumen panjang - dan faktor bentuk ini sangat cocok untuk saya.



Saya sudah melakukan ini sejak lama . Ini adalah bagian alami dari alur kerja saya. Orientasi layar ini paling baik untuk dokumen apa pun yang lebih panjang dari email. Sebagian besar aplikasi Linux berfungsi dengan baik dalam format ini, meskipun menu tidak selalu muat di layar.



Tapi situs di Internet adalah sesuatu yang sangat tidak normal! Banyak orang yang mengira bahwa layar vertikal adalah perangkat seluler!



Ya, masalahnya kecil dan menyangkut saya secara pribadi, tetapi tetap masuk akal untuk menjelaskan apa konsekuensinya, apa alasannya dan bagaimana cara memperbaikinya.

Contoh dari

Berikut adalah beberapa situs web tipikal pada monitor vertikal 24 inci saya. Di sebelah kiri adalah render yang nyata, dan di sebelah kanan adalah bagaimana seharusnya .





Just Eat





The Guardian





Poular Science

Masalah

Dalam situasi seperti ini, saya punya beberapa masalah:

• Apakah bilah navigasi tersembunyi di balik tombol?
  
  
• Beberapa elemen seperti carousel hanya berfungsi pada layar sentuh
  
  
• Gambar dimuat dengan resolusi rendah untuk layar 6 "dan kemudian dibentangkan 24"
  
  
• Banyak ruang yang terbuang untuk "gambar utama" dan tombol yang ramah jari
  
  
• Beberapa konten tidak tersedia untuk pengguna ponsel

Mengapa itu terjadi

Resolusi asli monitor adalah 1080 * 1920. Tetapi pada resolusi ini, fontnya terlalu kecil untuk saya - mengingat seberapa jauh saya duduk dari layar. Distribusi Pop_OS Linux memiliki utilitas bernama Gnome Tweaks yang memungkinkan Anda untuk mengubah ukuran font secara spesifik, bukan resolusi.





Gnome Tweaks dengan faktor skala font Faktor skala



1,5 berarti resolusi layar efektif 720 * 1280.



Mengendus agen pengguna dianggap praktik yang buruk dan tidak disarankan. Oleh karena itu, kebanyakan situs tidak perlu repot-repot mengecek iPhone atau Android, melainkan mengecek resolusi layar menggunakan JavaScript atau CSS.



Mereka melihat layar 720p dalam orientasi potret dan menganggapnya sebagai perangkat layar kecil.

Solusi (sisi pengguna)

Perkecil di browser! Ini adalah jawaban yang jelas. Jika Anda menekan tiga kali Ctrl







, resolusi efektif akan kembali ke 1080 * 1920. Tetapi kemudian beberapa situs akan menjadi terlalu kecil untuk pembacaan normal. Artinya, Anda perlu mengurangi skala halaman dan menambah font.



Saya mencoba Fractional Scaling  - ini berfungsi dengan baik di Wayland, tetapi fontnya kabur dan tidak jelas.



Jadi saya menyetel skala font ke 1.36, yang memberikan resolusi 864 * 1536 - itu cukup untuk mencegah sebagian besar situs mengenali perangkat seluler mungil itu.



Tapi itu bukan masalah saya.

Solusi (sisi server)

BERHENTI SECARA ALAMI MENGGUNAKAN IZIN!



Ya, tidak ada cara untuk mengetahui ukuran fisik layar pengguna. Fungsionalitas seperti itu tidak ada di JavaScript atau CSS.



Tapi Anda bisa mengetahui DPI-nya. Nah, tentang ...



CSS memungkinkan Anda mengetahui DPI layar.



Situs web https://DPI.lv/ Lea Veru dengan benar mengenali resolusi monitor saya 1080 * 1920! Terlepas dari penskalaan font - selalu menunjukkan resolusi yang benar.

var dppx = window.devicePixelRatio;
var screenWidth  = screen.width  * dppx;
var screenHeight = screen.height * dppx;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Beginilah resolusi sebenarnya ditentukan terlepas dari penskalaan OS. Detektor DPI



lain menunjukkan titik per inci. Monitor vertikal saya ditetapkan sebagai 120 DPI. Ini tidak sepenuhnya benar. Dan mesin browser yang berbeda menghitung DPI secara berbeda. Berikut adalah hasil yang saya dapatkan di Linux pada tiga mesin rendering utama:

• Chrome: 5,14 piksel / mm
  
  
• Firefox: 4,73 piksel / mm
  
  
• WebKit: 3,78 piksel / mm

Jika Anda mengukur layar secara fisik, Anda mendapatkan sekitar 3,62 piksel / mm!



Jelas, metrik tersebut tidak sepenuhnya akurat, tetapi setidaknya memberikan gambaran kasar kepada pengembang web tentang ukuran layar fisik.