HTML 5移動端視口に関する問題

スクリーンサイズ、スクリーン解像度、スクリーンピクセル密度

    ：   
                  ，     ，1  =2.54  。
                2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0 。

     ：（iphone6  750*1334）
               ，   px，1px=1    。       *               ， 1920*1080。（   1          1    ）    
          /    /    ：
                     ，   ppi， “pixels per inch”   。
                       

   ：1.        2.   

物理画素、CSS画素

     /    ：（   ）
               n x m     ，     n x m     ，
           （   ）       。
                    .       
                    ,                 。
                              。
                          

CSS  ：
    CSS          ，         ，       （  ）Web      。
       web      ， css  javascript          
         ，CSS             （device-independent  ），   “DIPs”。
               (   )，  CSS           。

css          
      width 200px   ，    200 css  ， 200 css              
         （      ,    ）        。
              ，                ，        400     
          ，           

      :      (        )，                 ，
                           (  : css  )，
                      。

    ：            ( ：png, jpg, gif )         
    1        1     ，                    

  web     ：
                css javascript             css  ，        
              css              。                    
                  。

ピクセル比

   :        ：                ，    devicePixelRatio =      /    
        window.devicePixelRatio

ビューポートとブラウザウィンドウ

           ，                  。

        ,                ,                    pc      
         ,           ?
         pc       960px  1024px，          ，
                       ，
                                            
    （    960      1024）。
            960，                        

                 width

モバイルブラウザメーカーは何かしなければなりませんか(このコンテナはブラウザメーカーが設定すべきです)

     pc ：
                          ，          
        ：
                （    ）                  
                  ：
                  ，                   

layout viewportとvisual viewport

layout viewport:
           ，               ，                  

               ，                      。
            document.documentElement.clientWidth    ， pc ，    width 20%                  width   ，                     ，      ，                。

visual viewport:
                    ，    css               
       visual viewport       window.innerWidth    ，  Android 2, Oprea mini   UC 8       。

理想的なビューポート

      ：                   ，          ，       
              。                            ！

               ，          。            viewport meta  ，
        。


         ，                   

width :     
device-width ：           

      =      =     

meta

    width [pixel_value | device-width] width 
    --                          IOS  

1.       ,              css     ,           

2.      ,        :         css  ,              

3.      ,        ,                          

4.                 ,   ,           

デフォルト(metaラベルなし)

                  ，            。
                ，                  ，                    

                      ，               。                           ，           。
         ,         css       ,
            （    ，         ）

  
        css       
      css              
            css       
          

  （     （  meta  ）             ）
        css       
      css              
            css       
          


    ，    ，                  
         ，            css     

    ：
                        980 css     
     meta                          

    ：
                          css       
                          css       

    
             meta     ，                    

ビューポートのメインラインを考える

1.               
2.          ，        css         

拡大・縮小

        ,         css       ,           
      
            css       （                    css  ）

      （     （  meta  ）             ）
            css       
          css            
                css       

                       ！！！！！！！！！！！！！！！！！

pc ：
           （    ）

   ：
                ，