Clever Geek Handbook

縦型モニターだけでは、電話をしているわけではありません



縦画面のYouTube



はい、私は見知らぬ人です、私はそれを完全に認めます。自宅のコンピューターに垂直モニターがあります。私はたくさんの長い文書を作成して読んでいます-そしてこのフォームファクターは私にぴったりです。



私は これを長い間やっています。これは私のワークフローの自然な部分です。この画面の向きは、電子メールより長いドキュメントに最適です。ほとんどのLinuxアプリケーションはこの形式で正常に動作しますが、メニューが常に画面に収まるとは限りません。



しかし、インターネット上のサイトは完全に異常なものです！多くの人が、垂直画面は間違いなくモバイルデバイスだと考えています。



はい、問題は軽微で個人的に懸念されますが、それでも結果が何であるか、理由は何か、それを修正する方法を説明することは理にかなっています。



の例



これが私の24インチ垂直モニターのいくつかの典型的なウェブサイトです。左側は実際のレンダリングであり、右側はそれがどうある べきかです。 ガーディアンポラーサイエンスを





食べるだけ















問題



そのような状況では、私はいくつかの問題を抱えています：



  • ナビゲーションバーはボタンの後ろに隠れていますか？

  • カルーセルなどの一部の要素は、タッチスクリーンでのみ機能します

  • 画像は6 "画面の低解像度で読み込まれ、24"引き伸ばされます

  • 「マスター画像」と指に優しいボタンに多くのスペースが浪費されています

  • 一部のコンテンツは、モバイルユーザーが利用できないだけです


なぜそれが起こるのか



モニターのネイティブ解像度は1080 * 1920です。しかし、この解像度では、フォントが小さすぎます。画面からどれだけ離れているかを考えると。Pop_OS Linuxディストリビューションには、Gnome Tweaksと呼ばれるユーティリティがあり、解像度ではなく、フォントを具体的にスケーリングできます。





フォントの倍率を使用したGnomeの調整倍率



1.5は、720 * 1280の有効な画面解像度を意味します。



ユーザーエージェントのスニッフィングは悪い習慣と見なされており、推奨されていません。したがって、ほとんどのサイトはiPhoneやAndroidをわざわざチェックするのではなく、JavaScriptまたはCSSを使用して画面の解像度をチェックします。



彼らは720pの画面を縦向きで見て、それが小さな画面のデバイスであると合理的に想定しています。



解決策（ユーザー側）



ブラウザをズームアウトします。これは明白な答えです。を3回押す Ctrl







と、実効解像度は1080 * 1920に戻ります。しかし、その後、一部のサイトは通常の読み取りには小さすぎます。つまり、ページの縮尺を小さくし、フォントを大きくする必要があります。 Fractional Scaling



を試し  ました。Waylandでは問題なく動作しますが、フォントがぼやけてぼやけています。 そこで、フォントスケールを1.36に設定しました。これにより、解像度は864 * 1536になります。これは、ほとんどのサイトが小さなモバイルデバイスを認識しないようにするのに十分です。 しかし、それは私の問題ではありません。











ソリューション（サーバー側）



許可証の使用をやめましょう！



はい、ユーザーの画面の物理的なサイズを知る方法はありません 。このような機能は、JavaScriptやCSSには存在しません。



しかし、DPIを見つけることができます。さて、約...



CSSを使用すると、画面のDPIを確認できます 。Web



サイト https://DPI.lv/ Lea Veruは、モニター1080 * 1920の解像度を正しく認識します。フォントのスケーリングに関係なく、 常に正しい解像度が表示されます。 



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


これは、OSのスケーリングに関係なく実際の解像度が決定される方法です。



別の DPI検出器は、1インチあたりのドット数を示します。私の垂直モニターは120DPIとして定義されています。



これは完全に正しいわけではありません 。また、ブラウザエンジンが異なれば、DPIの計算も異なります。Linuxで3つの主要なレンダリングエンジンを使用した場合の結果は次のとおりです。



  • Chrome：5.14ピクセル/ mm

  • Firefox：4.73ピクセル/ mm

  • WebKit：3.78ピクセル/ mm


画面を物理的に測定すると、約3.62ピクセル/ mmになります。



明らかに、メトリックは完全に正確ではありませんが、Web開発者に少なくとも物理的な画面サイズの大まかなアイデアを提供します。


More articles:


All Articles