<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=0.5,minimum-scale=0.5,maximum-scale=1">(灰色部分可以不写)

viewport 视口(可视区窗口)

默认不设置viewport一般可视区宽度在移动端是980

width 可视区的宽度(number||device-width)

user-scalable 是否允许用户缩放(yes||no)  注:ios10无效

initial-scale 初始缩放比例  minimun-scale 最小缩放比例(initial-scale与minimum-scale是需要保持一致的) maximum-scale 最大缩放比例   注意:ios10最大缩放比例无效

像素比:

<script>

  alert(window.devicePixelRatio);

//n=window.devicePixelRatio;

  //像素比把一个像素放大至N个像素去显示

  //设计图最少750

</script>

QQ浏览器强制竖屏还是横屏显示:portrait--竖屏  landscape--横屏

<meta name="x5-orientation"  content="portrait"/>

QQ浏览器全屏显示

<meta name="x5-fullscreen" content="true"/>

UC强制竖屏或横屏显示

<meta name="screen-orientation" content="portrait|landscape">

UC全屏显示

<meta name="full-screen" content="yes">

禁止识别电话号码和QQ

<meta name="format-detection" content="telephone=no,email=no"/>

拨打电话与发送邮件

<a href="tel:15371469791">请拨打电话15371469791</a>

<a href="mailto:284811638@qq.com">请发送邮件</a>

移动端问题解决:

<style type="text/css">

body{

  font-family:Helvetica;

}

body * {

  -webkit-text-size-adjust:100%;/*禁止文字缩放*/

  -webkit-user-select:none;

}

a,input,button{

-webkit-tap-highlight-color:rgba(0,0,0,0);/*清除点击阴影*/

}

input,button{

  -webkit-appearance:none;/*清除按钮圆角*/

  border-radius:0;

}

</style>

移动端其他问题:

1.Font Boosting :在一段文字我们没有给它设置高度的时候在webkit内核下文字的大小被浏览器放大了

  解决办法:

    1.设置高度

    2.设置最大高度 max-height

2.Fixed : 固定定位不兼容

  解决办法:

  <style>

    html{

     height:100%;

     overflow:hidden;

     position:relative;

    }

    body{

     height:100%;

     margin:0;

     overflow:auto;

    }

    header{

      position:absolute; /*用绝对定位去模拟固定定位,把html的滚动条隐藏,将滚动条加在body身上,根据html去定位*/

      width:100%;

      height:40px;

      background:rgba(0,0,0,0.5);

      color:#fff;

    }

    section{

      padding-top:40px;

    }

  </style>

    <header>我是头部</header>

    <section>

      页面内容<br/>

      页面内容<br/>

        。。。。。。

    </section>

3.IOS的body的overflow之后还是可以横向滚动

  解决办法:

  <style>

    html{

     height:100%;

     overflow:hidden;

    }

    body{

     height:100%;

     margin:0;

     overflow:hidden;

     position:relative;

    }

    #wrap{

     height:100%;

     overflow:auto;

    }

    header{

     position:absolute;

     width:200%;

     height:40px;

     background:rgba(0,0,0,0.5);

     color:#fff;

     text-align:center;

    }

    section{

      padding-top:40px;

    }

  </style>

  <div id="wrap">   //包一个div,根据body定位   

    <header>我是头部</header>

    <section>

      页面内容<br/>

      页面内容<br/>

      。。。。。。

    </section>

  </div>

移动端适配(1)——viewport设置与初始化css的更多相关文章

  1. 移动端适配:font-size设置的思考

    1. 问题的引出 如果html5要适应各种分辨率的移动设备,可以使用rem这样的尺寸单位,针对各个分辨率范围在html上设置font-size的代码: html{font-size:10px} @me ...

  2. 浅谈meta viewport设置移动端自适应

    1.viewport 移动设备上的viewport是设备屏幕上用来显示网页的那部分区域,再具体一点就是浏览器上用来显示网页的那部分区域,但viewport又不局限于浏览器可视区域的大小,它可能比浏览器 ...

  3. viewport移动端适配,读文笔记

    文章地址: viewport移动端适配 笔记: 移动端适配目的: 希望在屏幕尺寸大小不同的手机上进行访问页面时,页面显示的效果能合理的展示,我们期望的是在手机屏幕较大时显示的内容比较大一些,手机屏幕小 ...

  4. 移动端适配(rem & viewport)--移动端开发整理笔记(四)

    移动端适配 通过rem适配 em: 根据元素自身的字体大小来计算自己的尺寸 rem: (root em) 根据根节点(html)的字体大小来计算自己的尺寸   我们知道,在不同的手机设备,分辨率大小是 ...

  5. hotcss.js Flexible 移动端适配在dpr=2和dpr=3出现的字体大小设置不正确问题.

    这段时间一直在用hotcss做移动端适配,做了几个页面没有发现什么问题,后来老大要加快进度,我把项目分出一块给另一个同事做,她发现了一个问题就是字体在dpr=2,dpr=3,的设备上字体大小显示老是不 ...

  6. Web移动端适配总结

    移动端适配的相关概念以及几种方案总结 适配相关概念 布局视口(layout viewport):html元素的上一级容器即顶级容器,用于解决页面在手机上显示的问题.大部分移动设备都将这个视口分辨率设置 ...

  7. 手淘H5移动端适配方案flexible源码分析

    移动端适配一直是一个值得探讨的问题,在业余时间我找了一些页面,查看了一些厂商对于移动端H5页面的适配方案,看到了几个典型的例子,今天就来记录一下我看到的第一个典型的例子,也是我们公司目前普通H5项目正 ...

  8. 移动端适配 rem

    前置知识: 物理像素(physical pixel,device pixel) 物理像素(设备像素),显示设备中一个最微小的物理部件.每个像素可以根据操作系统设置自己的颜色和亮度. 设备独立像素(de ...

  9. 基于Vue/React项目的移动端适配方案

    本文的目标是通过下文介绍的适配方案,使用vue或react开发移动端及H5的时候,不需要再关心移动设备的大小,只需要按照固定设计稿的px值布局,提升开发效率. 下文给出了本人分别使用create-re ...

随机推荐

  1. UncategorizedSQLException Mybatis中jdbcType的作用

    使用MyBatis框架做更新操作时,在该字段需要更新的内容为空时,就会出现1111错误,也就是无效的列类型,这个时候你就要使用jdbcType.至于什么时候要使用到javaType我还没遇到过,而且我 ...

  2. P4094 [HEOI2016/TJOI2016]字符串 后缀数组+主席树+二分答案

    $ \color{#0066ff}{ 题目描述 }$ 佳媛姐姐过生日的时候,她的小伙伴从某东上买了一个生日礼物.生日礼物放在一个神奇的箱子中.箱子外边写了一个长为n的字符串s,和m个问题.佳媛姐姐必须 ...

  3. 「NOI.AC」Leaves 线段树合并

    题目描述 现在有一棵二叉树,所有非叶子节点都有两个孩子.在每个叶子节点上有一个权值(有\(n\)个叶子节点,满足这些权值为\(1\dots n\)的一个排列).可以任意交换每个非叶子节点的左右孩子. ...

  4. 13.Convert BST to Greater Tree(将树转为更大树)

    Level:   Easy 题目描述: Given a Binary Search Tree (BST), convert it to a Greater Tree such that every k ...

  5. python依赖文件的生成requirement.txt

    移到你的环境中 pip freeze > requirement.txt

  6. shell控制流程

    #!/bin/bash #存储为a.sh == ] then #参数正确,返回0 else #参数错误,返回1 fi #!/bin/bash #存储为b.sh echo $? $ . ./a.sh $ ...

  7. Web安全工程师(进阶)课程表

    01-SQL注入漏洞原理与利用 预备知识: 了解HTTP协议,了解常见的数据库.脚本语言.中间件.具备基本的编程语言基础. 授课大纲: 第一章:SQL注入基础 1.1 Web应用架构分析1.2 SQL ...

  8. vue四、实例

    1.new Vue创建根实例 2.data对象,所有的属性加入到 Vue 响应式系统-值发生改变时,视图自动变更为新值 只有实例被创建时存在的属性才会响应式改变,后增加的不会 vue定义的实例属性和方 ...

  9. SprimgMVC学习笔记(七)—— 上传图片

    一.配置虚拟目录 在tomcat上配置图片虚拟目录,在tomcat下conf/server.xml中添加: <Context docBase="D:\upload\temp" ...

  10. poj2001 Shortest Prefixes(字典树)

    Shortest Prefixes Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 21642   Accepted: 926 ...