meta标签 | 易学教程

移动端适配、移动端事件，理想视口

阅读更多关于移动端适配、移动端事件，理想视口

禁止滚动条取消滚动条的默认样式：html{height:100%;overflow:hidden;} body{height:100%;overflow:hidden;} 并在js中写入：document.addEventListener('touchstart',function(event){ event.preventDefault();}) 移动端事件 changedTouches 触发当前事件手指的列表（默认是一个）【经常使用】（当前事件） targetTouches 触发当前目标元素上的手指列表（可以是多个）（当前元素） touches 当前屏幕上的手指列表（可以是多个）（屏幕上的手指数）使用时使用的是 changedTouches[0]; eg. 获取event事件中的clientX属性__ event.changedTouches[0].clientX 在移动端操作必做的步骤： 1. <meta name="viewport" content="width=device-width,initial-scale=1.0 /> 2. * {margin:0; padding:0;} (某些Chrome不能取消默认行为时 *{action-touch:none;}) html,body{height:100%; overflow:hidden;} 3.

HTML5中几种meta标签的含义及使用（含移动端）

阅读更多关于 HTML5中几种meta标签的含义及使用（含移动端）

1、<meta name="renderer" content="webkit"> 这是指定双核浏览器，默认以何种方式渲染页面。 <meta name="renderer" content="webkit">//默认webkit内核 <meta name="renderer" content="ie-comp">//默认IE兼容模式 <meta name="renderer" content="ie-stand">//默认IE标准模式而 webkit|ie-comp|ie-stand 这种写法，跟font-family的规则类似，按照顺序排他的优先级，不支持则往下，浏览器将会按照从左到右的先后顺序选择其具备的渲染内核来处理当前网页。目前支持对其提供支持的浏览器有:360 2、<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 这是一个文档兼容模式的定义。 Edge 模式告诉 IE 以最高级模式渲染文档，也就是任何 IE 版本都以当前版本所支持的最高级标准模式渲染，避免版本升级造成的影响。简单的说，就是什么版本 IE 就用什么版本的标准模式渲染 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 使用以下代码强制 IE 使用 Chrome Frame

html5移动端常见问题集锦

阅读更多关于 html5移动端常见问题集锦

meta基础知识 H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 <meta name=”viewport” content=”width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no” /> 忽略将页面中的数字识别为电话号码 <meta name=”format-detection” content=”telephone=no” /> 忽略Android平台中对邮箱地址的识别 <meta name=”format-detection” content=”email=no” /> 当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari <meta name=”apple-mobile-web-app-capable” content=”yes” /> <!– ios7.0版本以后，safari上已看不到效果 –> 将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式 <meta name=”apple-mobile-web-app-status-bar-style” content=”black” /> <!– 可选default、black、black-translucent –> viewport模板

移动端开发总结（一）视口viewport总结

阅读更多关于移动端开发总结（一）视口viewport总结

转载链接：移动端开发中，关于适配问题的一点总结(一) 视口布局视口layout viewport 视觉视口visual viewport 理想视口缩放一个重大区别最小缩放和最大缩放分辨率物理分辨率dpi 设备像素比 dpr dipsdevice-independent pixels 例子 meta视口完美的meta 视口视口 < meta name = "viewport" content = "width=device-width" /> 我们一直在使用这行代码，但是这样写有什么用？加了这个和不加这个到底有什么区别？要解释这个问题，我们首先要了解一个概念 - 视口在解释视口之前，我们先回顾一下CSS的基础： css中，在没有声明任何宽度时，每个块级元素的默认宽度都是100% 。那这个100% 是相对于什么的100% 呢？对了，是它父元素的100% 。每一个css百分比都是根据它的父元素的宽度来进行计算的，所以宽度为父元素宽度的100% ，本质是： body , html { //没有制定宽度，默认100%} div .aside { width : 20 % ; } 这里，div.aside占用了它的父元素 body 宽度的100％，但我们没有给body 定义宽度，因此，它占用了它的父元素，也就是html 宽度的100% 。但

在html页面上设置不缓存

阅读更多关于在html页面上设置不缓存

微信公众平台开发：进阶篇(Web App开发入门)

阅读更多关于微信公众平台开发：进阶篇(Web App开发入门)

WebApp与Native App有何区别呢？ Native App： 1、开发成本非常大。一般使用的开发语言为JAVA、C++、Objective-C。 2、更新体验较差、同时也比较麻烦。每一次发布新的版本，都需要做版本打包，且需要用户手动更新（有些应用程序即使不需要用户手动更新，但是也需要有一个恶心的提示）。 3、非常酷。因为native app可以调用IOS中的UI控件以UI方法，它可以实现WebApp无法实现的一些非常酷的交互效果。 4、Native app是被Apple认可的。Native app可以被Apple认可为一款可信任的独立软件，可以放在Apple Stroe出售，但是Web app却不行。 Web App： 1、开发成本较低。使用web开发技术就可以轻松的完成web app的开发。 2、升级较简单。升级不需要通知用户，在服务端更新文件即可，用户完全没有感觉。 3、维护比较轻松。和一般的web一样，维护比较简单，它其实就是一个站点。 Webapp说白了就是一个针对Iphone、Android优化后的web站点，它使用的技术无非就是HTML或HTML5、CSS3、JavaScript，服务端技术JAVA、PHP、ASP。当然，因为这些高端智能手机（Iphone、Android）的内置浏览器都是基于webkit内核的，所以在开发WEBAPP时，多数都是使用

JQuery特殊属性操作、事件机制（3）

阅读更多关于 JQuery特殊属性操作、事件机制（3）

1. jQuery特殊属性操作 1.1. val方法 val方法用于设置和获取表单元素的值，例如input、textarea的值 //设置值 $("#name").val(“张三”); //获取值 $("#name").val(); 1.2. html方法与text方法 html方法相当于innerHTML text方法相当于innerText //设置内容 $(“div”).html(“<span>这是一段内容</span>”); //获取内容 $(“div”).html() //设置内容 $(“div”).text(“<span>这是一段内容</span>”); //获取内容 $(“div”).text() 区别：html方法会识别html标签，text方法会那内容直接当成字符串，并不会识别html标签。 1.3. width方法与height方法设置或者获取高度 //带参数表示设置高度 $(“img”).height(200); //不带参数获取高度 $(“img”).height(); 获取网页的可视区宽高 //获取可视区宽度 $(window).width(); //获取可视区高度 $(window).height(); 1.4. scrollTop与scrollLeft 设置或者获取垂直滚动条的位置 //获取页面被卷曲的高度 $(window).scrollTop()

360浏览器根据网页META 自动切换内核

阅读更多关于 360浏览器根据网页META 自动切换内核

浏览器内核控制Meta标签说明文档背景介绍由于众所周知的情况，国内的主流浏览器都是双核浏览器：基于Webkit内核用于常用网站的高速浏览。基于IE的内核用于兼容网银、旧版网站。以360的几款浏览器为例，我们优先通过Webkit内核渲染主流的网站，只有小量的网站通过IE内核渲染，以保证页面兼容。在过去很长一段时间里，我们主要的控制手段是一个几百k大小网址库，一个通过长期人工运营收集的网址库。尽管我们努力通过用户反馈、代码标签智能判断技术提高浏览器的自动切核准确率。但是在很多情况下，我们仍然无法达到百份百正确。因此，我们新增加了一个控制手段：内核控制Meta标签。只要你在自己的网站里增加一个Meta标签，告诉360浏览器这个网址应该用哪个内核渲染，哪么360浏览器就会在读取到这个标签后，立即切换对应的内核。并将这个行为应用于这个二级域名下所有网址。目前该功能已经在所有的360安全浏览器实现。我们也建议其它浏览器厂商一起支持这个实现。让这个控制标签成为行业标准。代码示例在head标签中添加一行代码： <html> <head> <meta name = "renderer" content = "webkit|ie-comp|ie-stand" > </head> <body> </body> </html> content的取值为webkit,ie-comp,ie

浏览器内核控制meta name="renderer" 说明文档

阅读更多关于浏览器内核控制meta name="renderer" 说明文档

浏览器内核控制Meta标签说明文档背景介绍由于众所周知的情况，国内的主流浏览器都是双核浏览器：基于Webkit内核用于常用网站的高速浏览。基于IE的内核用于兼容网银、旧版网站。以360的几款浏览器为例，我们优先通过Webkit内核渲染主流的网站，只有小量的网站通过IE内核渲染，以保证页面兼容。在过去很长一段时间里，我们主要的控制手段是一个几百k大小网址库，一个通过长期人工运营收集的网址库。尽管我们努力通过用户反馈、代码标签智能判断技术提高浏览器的自动切核准确率。但是在很多情况下，我们仍然无法达到百份百正确。因此，我们新增加了一个控制手段：内核控制Meta标签。只要你在自己的网站里增加一个Meta标签，告诉360浏览器这个网址应该用哪个内核渲染，哪么360浏览器就会在读取到这个标签后，立即切换对应的内核。并将这个行为应用于这个二级域名下所有网址。目前该功能已经在所有的360安全浏览器实现。我们也建议其它浏览器厂商一起支持这个实现。让这个控制标签成为行业标准。代码示例在head标签中添加一行代码： <html> <head> <meta name="renderer" content="webkit|ie-comp|ie-stand"> </head> <body> </body> </html> content的取值为webkit,ie-comp,ie-stand之一

X-UA-Compatible属性的解释

阅读更多关于 X-UA-Compatible属性的解释

问题描述：代码如下: <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" /> 1、这个到底是什么意思？ 2、一些示例使用”,”分离IE的版本，而一些使用”；“，哪个正确？ 3、我想知道IE=9; IE=8; IE=7; IE=EDGE顺序的含义。在文档中使用了<!DOCTYPE> 答复：对于IE8及以上版本，例如： <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7" /> 强制浏览器按照特定的版本标准进行渲染。但不支持IE7及以下版本。如果用分号（；）分隔，对于不同的浏览器版本就有不同的兼容性，例如 <meta http-equiv="X-UA-Compatible" content="IE=7; IE=9" /> 以上就表明，将IE8和IE7按照IE7标准渲染，但是IE9还是按照IE9的标准渲染。它允许有不同的向后兼容水平。尽管在真实情况中，你只要选择一种版本：代码如下: <meta http-equiv="X-UA-Compatible" content="IE=8" /> 这对于测试和维护会更加简单。而通常更加有用的方式就是进行仿真模拟代码如下: <meta http-equiv="X-UA

订阅 meta标签