zoukankan      html  css  js  c++  java
  • 移动端网页中ViewPort的使用

      <meta name="viewport" content="width=device-width,target-densitydpi=high-dpi, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=no”/>
    <meta name="viewport" content="target-densitydpi=device-dpi, width=480px, user-scalable=no" /> 
    <meta content="target-densitydpi=320, width=device-width, user-scalable=no" name="viewport">

    如何使移动手机网页根据固定的比例进行放大或者缩小呢?

    首先在ViewPort中定义设备宽度等于固定宽度。

    <meta name="viewport"
                content="target-densitydpi=device-dpi, width=320px, user-scalable=no" />

    Android中是根据DPI来显示页面,使用JS设置一下DPI

    function setAndroidDpi(){
                    var sUserAgent = navigator.userAgent.toLowerCase();  
                    var bIsAndroid = sUserAgent.match(/android/i) == "android"; 
                    if(bIsAndroid){
                        var uiWidth = 320, deviceWidth = screen.width,getTargetDensitydpi,targetDensitydpi;
                        getTargetDensitydpi = uiWidth / deviceWidth * window.devicePixelRatio * 160;
                        targetDensitydpi = 'target-densitydpi=' + getTargetDensitydpi + ', width=device-width, user-scalable=no';
                        //alert("deviceWidth:" + deviceWidth + "" + screen.width + ",userAgent:" + sUserAgent + ",bIsAndroid:" +  bIsAndroid + ",getTargetDensitydpi:" + getTargetDensitydpi + ",targetDensitydpi:" + targetDensitydpi);
                        document.getElementsByName('viewport')[0].setAttribute('content', targetDensitydpi );
                    }
                }
                
                //setAndroidDpi();
                
                window.onresize = function(){
                    setAndroidDpi();
                }

     --------------------------------------------------------------------

    根据Em写的网页,修改html和body的font-size来让网页自动缩放

    function init() {
        var pageWidth = window.innerWidth,
            uiPageWidth = 640,
            initSize = 16,
            baseSize = 0;
        if (window.navigator.userAgent.indexOf("Windows NT") > -1 && pageWidth >= uiPageWidth) {
            baseSize = initSize;
        }else{
            baseSize = initSize * (pageWidth / uiPageWidth);
        }
        document.getElementsByTagName("body")[0].style.fontSize = baseSize + "px";
        document.getElementsByTagName("html")[0].style.fontSize = baseSize + "px";
    }
    
    init();
    
    window.onresize = init;

    参考:

      ViewPort定宽缩放部分参考自:http://www.cnblogs.com/plums/archive/2013/01/10/2855070.html

    缘来天注定,缘去人自夺。种如是因,收如是果,一切唯心造。笑言面对,不去埋怨。悠然、随心、随性、随缘。
  • 相关阅读:
    CentOS7基础优化与常用配置
    MHA+binlogserver+VIP+sendreport 高可用架构
    GTID主从复制
    主从复制故障处理
    主从复制
    mysql 配置文件
    通用二进制安装mysql-5.7.28(无坑)
    css动画 文字闪烁效果
    cmd命令提示符大全(干货)
    JS实现手机摇一摇功能
  • 原文地址:https://www.cnblogs.com/gaojianqi/p/3431487.html
Copyright © 2011-2022 走看看