zoukankan      html  css  js  c++  java
  • Web Design

    What is The Viewport?

    The viewport is the user's visible area of a web page.

    The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.

    Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size.

    Then, when we started surfing the internet using tablets and mobile phones, fixed size web pages were too large to fit the viewport. To fix this, browsers on those devices scaled down the entire web page to fit the screen.

    This was not perfect!! But a quick fix.

     

    LINK:http://www.w3schools.com/css/css_rwd_viewport.asp 

           function init_viewport() {
               if (/Android (d+.d+)/.test(navigator.userAgent)) {
                   var version = parseFloat(RegExp.$1);
                   if (version > 2.3) {
                       var width = window.outerWidth == 0 ? window.screen.width : window.outerWidth;
                       var phoneScale = parseInt(width) / 480;
                       document.write('<meta name="viewport" content="width=500, minimum-scale = ' + phoneScale + ', maximum-scale = ' + phoneScale + ', target-densitydpi=device-dpi">');
                   }
                   else {
                       document.write('<meta name="viewport" content="width=480, target-densitydpi=device-dpi">');
                   }
               }
               else if (navigator.userAgent.indexOf('iPhone') != -1) {
                   var phoneScale = parseInt(window.screen.width) / 480;
                   document.write('<meta name="viewport" content="width=480; min-height=750;initial-scale=' + phoneScale + '; user-scalable=no;" /> ');         //0.75   0.82
               }
               else {
                   document.write('<meta name="viewport" content="width=480, height=750, initial-scale=0.64" /> ');         //0.75   0.82
               }
           }
    init_viewport();

  • 相关阅读:
    UE4 多人模式
    UE4 r.ScreenPercentage 150 导致的画面只有丢失
    UE4 3D Widget渲染优先级最高
    UE4 VR中血条的做法 3d widget
    UE4 源码bug 蓝图节点CreateSession导致的崩溃
    UE4 小技巧
    ue4(转载) 在VR中的按钮 Button In VR
    ue4 可点击座舱实现 Clickable cockpit
    两种排序方法(选择排序和冒泡排序)
    特殊的Josn格式
  • 原文地址:https://www.cnblogs.com/xiaokang088/p/5649045.html
Copyright © 2011-2022 走看看