私は、モバイルデザインで使用するデバイスのDPIを見つける方法を探していました。 まだ見つけていませんが、サイトリーダーがRetinaディスプレイを使用しているかどうかを確認する方法を見つけました。 手間をかけずにこれを実現する方法は次のとおりです。

var retina = window.devicePixelRatio > 1 ? true : false;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

リーダーにRetinaディスプレイがある場合、 Retina変数はtrueになります 。 将来、単純なifステートメントを使用して、表示のタイプに応じて特定のコードを実行できます。

 if (retina) { //     retina } else { //      retina }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

なんで？

良い例です：私のサイトに100×100のイラスト（またはビデオ）がある場合、上記のコードは、より大きな画像（200×200）をダウンロードしてiPhone 4ではっきり見えるようにアドバイスします-他のデバイスのユーザーは写真をダウンロードする必要がありません不要な200×200。 結局のところ、速度はモバイルユーザーにとって特に重要です。

 if (retina) { var html = '<img src="200x200.jpg" width=100 height=100>'; } else { var html = '<img src="100x100.jpg" width=100 height=100>'; }