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();

  • 相关阅读:
    玩转渗透神器Kali:Kali Linux作为主系统使用的正确姿势TIPS
    知道创宇研发技能表v2.2
    我对什么都感兴趣,可我迷茫了(转载)
    防御性编程
    防御性编程技巧
    移动安全技术如何未雨绸缪?
    1054. 求平均值 (20)
    1053. 住房空置率 (20)
    1052. 卖个萌 (20)
    1051. 复数乘法 (15)
  • 原文地址:https://www.cnblogs.com/xiaokang088/p/5649045.html
Copyright © 2011-2022 走看看