zoukankan      html  css  js  c++  java
  • 移动端开发环境

    Emulation 模拟器

    真机测试 wamp

    一:Device 设备设置
    1. model 模型选择
    2. resolution 分辨率设置
    3. Device pixel ratio 像素比设置
    4. *Emulate mobile 模拟移动端特性
    5. *Enable text autosizing 自动缩放字体
    6. *Shrink to fit 缩放以适应屏幕
    二:Media 媒体查询
    三:Network 浏览器信息
    四:Sensors 传感器
    1. Emulate touch screen 模拟移动端触摸事件
    --touch-events
    2. Device Geolocation Overrides 重置地理信息
    3. Accelerometer 模拟陀螺仪
    α 围绕这Z轴的旋转
    β 围绕这X轴的旋转
    γ 围绕这Y轴的旋转

    <meta name="viewport" content="" /> 视口(浏览器窗口)
    1.width [pixel_value | device-width (手机默认宽度,物理分辨率)]
    2.user-scalable 是否允许缩放 (no||yes)
    3.initial-scale 初始比例
    4.minimum-scale 允许缩放的最小比例
    5.maximum-scale 允许缩放的最大比例
    6.target-densitydpi [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi] 像素点


    页面设置
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1" />视口的设置
    <meta name="format-detection" content="telephone=no, address=no, email=no"> 禁止拨打电话、地址、邮箱
    <meta name="apple-mobile-web-app-capable" content="yes"> 苹果自动生成到桌面
    <meta name="apple-mobile-web-app-status-bar-style" content="black">滚动条颜色设置

    布局设置

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1" />

    html{height:100%;overflow:hidden;}
    body{height:100%;overflow:auto;margin:0;}

    <script>
    /*   document.documentElement.getBoundingClientRect().width      取设备宽度*/
    var iWidth=document.documentElement.getBoundingClientRect().width;
    iWidth=iWidth>540?540:iWidth;
    document.body.style.fontSize=iWidth/10+"px";
    </script>

  • 相关阅读:
    CefSharp 屏蔽右键菜单
    CEfSharp下载文件 弹出保存框,实现 IDownloadHandler 接口
    C#使用Xamarin开发移动应用 ---- 系列文章
    浅析 fstab 与移动硬盘挂载方法
    树莓派设置固定IP地址
    win10 任务栏上的工具栏,重启消失的解决方法
    《丽人行》
    Chrome调试 ---- 控制台获取元素上绑定的事件信息以及监控事件
    Bootstrap基础学习 ---- 系列文章
    C#进阶系列 ---- 《CLR via C#》
  • 原文地址:https://www.cnblogs.com/xiaozhishang/p/4774643.html
Copyright © 2011-2022 走看看