html值得一说的应该就是适配

!!适配是与手机同时存在的

写好一个页面在手机端打开,会发现这个页面显示很小,那是因为设备的视口宽度viewport不等于设备宽度device-width,而页面是根据视口宽度显示的,一般来说一个手机的视口宽度是980px,而设备宽度是350px

如果测量手机的视口宽度呢,写一个红色背景颜色的宽度为980px的div和一个红色背景颜色的宽度为350px的div,在电脑打开,然后点击手机调试,会发现980px的div大概占满,而350px的只有三分之一

也就是说你在一个350px看一个980px的页面,当然会看起来很小了,还有就是这些年的手机更新换代有了2倍像素,3倍像素的屏幕,但其实设备宽度是没变的

如何让视口等于设备宽度,写一句meta标签就行,写在head标签里

  • width viewport 宽度(数值/device-width)
  • height viewport 高度(数值/device-height)
  • initial-scale 初始缩放比例
  • maximum-scale 最大缩放比例
  • minimum-scale 最小缩放比例
  • user-scalable 是否允许用户缩放(yes/no)
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

写上这句代码后重新查看980px和350px的div,会发现内容变大了,350px占满了,980px溢出了,而且字体大小也正常了,这个是告诫我们在手机端标签的宽度最好是用比例,块级标签默认就是百分之一百,手机端切记不能让用户横向滑动,写上这句适配后,文字就用16px,14px就是正常手机的正常显示大小了

高级些的适配,rem适配,这个在css里讲

其他meta

// utf-8 不解释
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- 忽略页面中的数字识别为电话,忽略email识别 -->
<meta name="format-detection" content="telphone=no, email=no" />
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- 删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 设置苹果工具栏颜色 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

html的适配的更多相关文章

  1. iOS---iOS10适配iOS当前所有系统的远程推送

    一.iOS推送通知简介 众所周知苹果的推送通知从iOS3开始出现, 每一年都会更新一些新的用法. 譬如iOS7出现的Silent remote notifications(远程静默推送), iOS8出 ...

  2. iOS的ATS配置 - 2017年前ATS规定的适配

    苹果规定 从2017年1月1日起,新提交的 app 不允许使用NSAllowsArbitraryLoads来绕过ATS(全称:App Transport Security)的限制. 以前为了能兼容ht ...

  3. Android权限管理之RxPermission解决Android 6.0 适配问题

    前言: 上篇重点学习了Android 6.0的运行时权限,今天还是围绕着Android 6.0权限适配来总结学习,这里主要介绍一下我们公司解决Android 6.0权限适配的方案:RxJava+RxP ...

  4. fir.im Weekly - 关于 iOS10 适配、开发、推送的一切

    "小程序"来了,微信变成名副其实的 Web OS,新一轮的Web App 与Native App争论四起.程序员对新技术永远保持灵敏的嗅觉和旺盛的好奇心,@李锦发整理了微信小程序资 ...

  5. iOS开发 适配iOS10

    2016年9月7日,苹果发布iOS 10.2016年9月14日,全新的操作系统iOS 10将正式上线. 作为开发者,如何适配iOS10呢? 1.Notification(通知) 自从Notificat ...

  6. 3D游戏中的画质与效率适配

      哪里来的需求? 众所周知,由于不同的设备配置不同.导致其CPU和GPU处理能力有高有低.同样的游戏想要在所有设备上运行流畅且画面精美,是不可能的.这就需要我们针对不同的设备能力进行画质调节,以保证 ...

  7. iOS 4s-6Plus屏幕自动适配及颜色转换为十六进制

    iOS各种屏幕自动适配及颜色转换为十六进制 ★★★XLJMatchScreen自动适配屏幕★★★ 支持pod导入 pod 'XLJScreenMatching', '~> 1.0.3' 如果发现 ...

  8. Android指纹识别深入浅出分析到实战(6.0以下系统适配方案)

    指纹识别这个名词听起来并不陌生,但是实际开发过程中用得并不多.Google从Android6.0(api23)开始才提供标准指纹识别支持,并对外提供指纹识别相关的接口.本文除了能适配6.0及以上系统, ...

  9. 【转载】iOS屏幕适配设计

    移动app开发中多种设备尺寸适配问题,过去只属于Android阵营的头疼事儿,只是很多设计师选择性地忽视android适配问题,只出一套iOS平台设计稿.随着苹果发布两种新尺寸的大屏iPhone 6, ...

  10. QML 从无到有 2 (移动适配)

    随着项目深入,需要移植到安卓上,问题来了,QML安卓适配! 幸好PC端程序和手机屏幕长宽比例相似.虽然单位像素,尺寸不同,通过比例缩放,可以实现组件PC和安卓通用代码. 第一步:定义全局的转换函数(3 ...

随机推荐

  1. HTML常用标签效果展示

    HTML常用标签效果展示 一.文本效果 段落1---收到了开发建设看来得更加快乐圣诞节福利肯定是减肥的路上苏里科夫就是打开了飞机都是风口浪尖上的疯狂了大煞风景圣诞快乐的索科洛夫几点上课了关键是低空掠过 ...

  2. MFC TreeControl简单应用

    目录 1. TreeControl添加节点 2. TreeControl菜单 3. TreeControl修改节点 4. TreeControl查找节点 5. TreeControl折叠展开节点 6. ...

  3. 学习笔记(14)- SQuAD的数据格式

    BERT模型完成问答任务的时候,需要数据格式为SQuAD形式. 有2个版本,1.1和2.0

  4. TensorFlow基础三(Scope)

    用到变量名了,就涉及到了名字域的概念.通过不同的域来区别变量名,毕竟给所有变量都直接取不同名字还是有点辛苦的. 主要是name_scope和variable_scope,name_scope 作用于操 ...

  5. JS 表单相关

    var title = $("#subjects option:selected").text();

  6. 物联网协议CoAP协议学习

    CoAP:Constrained Application Protocol协议是为物联网中资源受限的设备制定的应用层协议,即简化版的基于UDP的HTTP协议.其核心内容为资源抽象.REST式交互可扩展 ...

  7. 实用类-<Math类常用>

    Math.random() //取0~1之间的随机数(不包括1) Math.max(数字1,数字2) //取两个数中最大的一个 Math.min(数字1,数字2) //取两个数中最小的一个 Math. ...

  8. R rep() 函数

    函数 rep(x,...) rep(x,times = n) 将向量 x 重复 n 次 rep(x,each = n) 将向量 x 的每个元素重复 n 次 在参数缺省情况下,为参数 times

  9. Lucene_solr

    1.总结 https://pan.baidu.com/s/1pMAWk0z  密码:ekhx 2.代码 https://pan.baidu.com/s/1nxmTWy1   密码:65ec 3.资料 ...

  10. 【剑指Offer面试编程题】题目1505:两个链表的第一个公共结点--九度OJ

    题目描述: 输入两个链表,找出它们的第一个公共结点. 输入: 输入可能包含多个测试样例. 对于每个测试案例,输入的第一行为两个整数m和n(1<=m,n<=1000):代表将要输入的两个链表 ...