有天，辛苦做了个复杂操作功能的页面，上线后有用户反馈：很多功能使用不了。惊了，以为是哪里出了bug。 立马联系用户，才发现原来是用户使用笔记本电脑，没有禁用触控板，然后不小心碰到导致整个界面都放大，很多功能超出界面不见了。 然而那能怎么办，用户第一，自然得快速解决这个问题，而且是触控板和触摸屏都得解决。
随着移动端的流行，在移动端对网站进行重构和开发势在必行。但是你只有了解了移动设备的meta viewport参数之后，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。
移动端的300ms点击延迟是因为移动端可以进行双击缩放的操作，因此浏览器在click之后要等待300ms，看用户有没有下一次点击，也就是判断这次操作是单击还是双击。如果通过监听touchstart事件来替代click事件的话，会导致一些问题：touchstart是手指触摸屏幕就触发，有时候用户只是想滑动屏幕，却触发了touchstart事件；当页面上有两个元素A和B，A元素在B元素上重叠放置，如果A元素的touchstart事件绑定的回调函数是隐藏A元素自身，那么当点击A元素后A元素会消失，事件的触发顺序是touchstart -> touchend -> click，如果在300ms内没有第二次点击便会触发click事件，此时由于A元素消失，那么click事件便落到了B元素上，如果B元素是个链接或者绑定了click事件，那么B元素的默认行为或者是绑定的事件回调便会意外地触发，这就是点击穿透问题，解决这个问题还是需要解决click事件的300ms延迟问题。
今天查Html手册时，又有了新的发现。也就这机会，好好总结下HTML中Meta的使用。
移动端 Web 页面，就是常说的手机 h5页面、webview页面、公众号开发的网页等。
隐藏状态栏/设置状态栏颜色：只有在开启WebApp全屏模式时才生效。content的值为default | black | black-translucent 。
功能：禁止所有搜索引擎索引本页面，禁止跟踪本页面上的链接。（如有特殊页面不希望被搜索到结果页，可使用）
快速反馈对于任何 UI 的实现都是至关重要的。研究表明，100ms 是界面让用户感到即时的最大延迟。尽管如此，移动网络仍然受到一个巨大的反馈问题的困扰：触摸任何元素后，延迟 300 毫秒。这种延迟是许多用户认为基于 HTML 的 Web 应用程序“卡顿”的最重要原因之一。在本文中，本文将带你了解移动端点击事件延迟的从诞生到消亡的过程。
在移动端 WEB 开发的时候（小程序也雷同），如上录屏所示，如果页面超过一屏高度出现滚动条时，在 fixed 定位的弹窗遮罩层上进行滑动，它下面的内容也会跟着一起滚动，看起来好像事件穿透到下面的DOM元素上一样，我们姑且称之为滚动穿透。
HTML+CSS meta标签的viewport属性说明 2016.05.30~2016.06.03 核心概念 viewport（视口） 参考答案 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> width=device-width 是设置视口宽度为设备的宽度，还可以固定视口的宽度，例如： width
Meta属性在移动端可以说是不得不知道的使用得非常频繁的技术。下面就给大家整理一下在移动端的各大浏览器一些私有的Meta属性。
移动端页面设置视口宽度等于定宽（如640px），并禁止缩放，常用于微信浏览器页面。
如同桌面端一样，在国内做web 移动开发的话肯定得考虑下移动端占有率靠前的几个国产浏览器的一些适配工作。好在当前移动端浏览器都是wekit 内核一霸天下，单从这个角度看兼容工作相对于桌面的百花齐放舒服了不少。 数据就不罗列了，目前移动端国产浏览器的占有率上是UC 跟QQ 浏览器这对基佬，所以做前端肯定优先考虑这二货。下面就说下移动端UC /QQ 浏览器的部分私有Meta 属性，都来自其开发者文档（UC开发者中心，左下一doc文档，QQ浏览器）。 UC 浏览器的部分私有Meta 属性 设置屏幕方向为横屏还是竖
最近的一个项目中，发现几个页面在使用 iPhone 11 访问的时候，点击 input 和 textarea 等文本输入框聚焦 focus() 时，页面会整体放大。
在移动端中我们经常碰到横屏竖屏的问题，那么我们应该如何去判断或者针对横屏、竖屏来写不同的代码呢。 首先在head中加入如下代码：
我们设置了1px的边框,但是这样有的电脑能正常显示边框有的又不行，到底是什么原因呢？
1 /** 2 * 移动端自适应 3 */ 4 <meta name="viewport" 5 content="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0"> 6 // 7 //
会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动
前端开发过程中，尺寸单位是我们必须用到的，下面我们对css中常见的几种尺寸单位px,em,rem,rpx进行逐一介绍 在这之前，需要先对几个概念进行普及介绍
SEO 又称搜索引擎优化，是 Search Engine Optimization 的缩写。
声明viewport视口 viewport对于移动端设备来说非常的重要，用于定义视口的各种行为。其中最为重要的就是要设定一个展示页面的宽度width=device-width，如果我们不设置的话，width默认的值是980PX，假设我们当前用的是IPHONE 5来访问H5页面，IPHONE 5本身的宽度只有320PX，但是设备定义了H5页面展示的区域宽度应该是980PX，这样的话要想把H5页面全部进行展示，只有整体缩小大约三倍或者让用户在320PX的区域中来回的挪动才能看全整个H5页面。这种方式用户的体验度会非常的差，所以我们设定width=device-width，意思是当前设备屏幕有多宽，那么就按照多宽来渲染页面，这样就不会出现需要靠缩小或者左右移动来看完整个页面了。
通常当你在手机上长按图像 img ，会弹出选项 存储图像 或者 拷贝图像，若不想让用户这么操作，可以设置方法来禁止：
Q: 当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。
一般是想通过各种方式来实现弹性图片的效果，在实现原理中也提供了几种方案，这里具体说明
3.最终签核完，生成PDF版的销售合同，且上面自动加盖公司的电子印章，并打印该合同
meta是html语言head区的一个辅助性标签。也许你认为这些代码可有可无。其实如果你能够用好meta标签，会给你带来意想不到的效果，meta标签的作用有：搜索引擎优化（SEO），定义页面使用语言，自动刷新并指向新的页面，实现网页转换时的动态效果，控制页面缓冲，网页定级评价，控制网页显示的窗口等！
不知不觉在网易已有三年半，占了一半时间都在与移动端打交道，整个阶段都是遇坑填坑的学习过程。移动端开发在前端里像神一样地存在，不是说它多难而是说它坑位实在太多了，怎样填都填不完。Android和iOS各显神通，Android的系统版本和屏幕分辨率多得难以一招兼容，iOS的顽固标准和未知特性多得难以快速掌握。
简单来说就是在开发中使用一些浏览器私有的方法，使得web页面拥有一些native的功能。
在 fabric.js 提供的文本组件中，默认状态是不会自动换行。如果你的使用场景中需要自动文本自动换行，可以使用 Textbox ，并将 splitByGrapheme 设置为 true 即可。
CSS 响应式布局也称自适应布局，是 Ethan Marcotte 在 2010 年 5 月份提出的一个概念，简单来讲就是一个网站能够兼容多个不同的终端（设备），而不是为每个终端做一个特定的版本。这个概念是为解决移动端浏览网页而诞生的。响应式布局能够为使用不同终端的用户提供很好的用户体验，而且随着大屏智能手机的普及，用“大势所趋”来形容也不为过。 要实现响应式布局，常用的方式有以下几种：
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
本文介绍了在CSS中如何实现容器的按比例缩放，通过使用padding-bottom百分比实现。同时，该文还介绍了一种实现视频等比缩放的方案，使用绝对定位和容器相对定位结合的方法。
图片因为本身存在宽高比，所以设置一个值，另一个值自动也就根据真实的比例对应上，但是如果是视频呢？
在 H5 中，我们通常会使用 REM 和 VW 这两种单位来实现页面的响应式布局。这两种单位可以让页面元素的大小随着根元素（对于 REM）或视口宽度（对于 VW）的大小变化而变化，从而适应不同尺寸的屏幕。
在移动端中我们经常碰到横屏竖屏的问题，那么我们应该如何去判断或者针对横屏、竖屏来写不同的代码呢。
1.点击样式闪动 Q: 当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。
说实话，我们这次开发移动端的项目，整个项目组的人都是第一次，最初立项的时候为是选择native app和web app还争论了一番，最后综合考虑，我们选择了web（我们选择了h5）开发。但从这两种开发
一、安装我们所需要的一些库 cnpm install mint-ui -S // 安装mint-ui库，ui库，cnmp是按照淘宝镜像后的用法，用法和npm一样。-s是将库添加到项目的packag
user-scalable=no：不允许手指缩放(因为一旦缩放就会出现水平滚动条)
这是一个最好的时代，因为我们站在潮流中；但也是一个最坏的时代，因为我们站在潮头上。 META相关
html5和css3流行至今，我在做响应式的网站一直是在“尝试”的阶段。并没有深入的去研究和学习，浅显的理解就是根据屏幕分辨率的大小，网站布局、图片、文字大小等相应改变。以后使用平板、手机浏览网站的用户会越来越多，对于前端设计师，学好用html5、css3做响应式网站是势在必行。 响应式网页设计这个术语，由伊桑马克特提出，他在Alist Apart 发表了一篇开创性的文章，将三种已有的开发技巧（弹性网格布局、弹性图片、媒体和媒体查询）整合起来，并命名为响应式网页布局。还有一些其他叫法，如流式设计、弹性布局、
在 HTML5 的项目中，我们做了移动端的项目。它有一份非常重要的 meta，用于设置屏
Meta标签是HTML语言head区的一个辅助性标签，它位于HTML文档头部的head标记和title标记之间，它提供用户不可见的信息。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他web服务。
前端爱好者的知识盛宴 嗨 这里是IMWEB 一个想为更多的前端人 享知识 助发展 觅福利 有情怀有情调的公众号 欢迎关注转发 让更多的前端技友一起学习发展~ 正文 < meta > 元素 概要 标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。 —— W3School 必要属性 可选属性 SEO优化 参考文档 （https://msdn.microsoft.com/zh-cn/li
Meta标签是HTML语言head区的一个辅助性标签，它位于HTML文档头部的head标记和title标记之间，它提供用户不可见的信息。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词）
文/小魔女 本文简介 前端开发系列的第二篇文章 基础知识就像是一把宝剑，能让你驰骋在前端领域的战场 知识亦有温度，让我们对新知识永远保持热度吧 分享小魔女的音乐 html渲染、css解析 在面试中，这部分基础知识，非常常见。 将以最简洁的文字，让读者掌握。 浏览器从开始解析HTML到渲染结束都经历了什么？ 解析HTML文件，创建DOM树 解析CSS，形成CSS对象模型 将CSS与DOM合并，构建渲染树（rendering tree） 布局和绘制 浏览器解析CSS是从左开始还是从右？为什么？
最近，端内在做 webView 统一的时候，个性签名中的 WebView 替换为 CustomWebView 之后，发现字体突然变小。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
