移动端 meta 必备】的更多相关文章

将页面宽度到跟手机宽度比例相同,在手机上不能用手缩放 <meta name="viewport"  content="width=device-width",initial-scale=1, maximum-scale=1, user-scalable=no"> 网站开启对 web app 程序的支持 <meta name="apple-mobile-web-app-capable"  content="ye…
原文链接:rem自适应布局-移动端自适应必备 版权所有,转载时请注明出处,违者必究. 由于移动端特殊性,本文讲的是如何使用rem实现自适应,或叫rem响应式布局,通过使用一个脚本就可以rem自适应,不用再为各种设备宽度不同而烦恼如何实现自适应的问题. rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个px字号,则可以来算出元素的宽高.1rem=16px(浏览器html的像素,可以设定这个基准值),假如浏览器的html设为64px,则下面的元素则1rem=64px来运算.…
移动端meta标签设置 1.设置当前html文件的字符编码 <meta charset="UTF-8"> 1 2设置浏览器的兼容模式(让IE使用最新的浏览器渲染) <meta http-equiv="X-UA-Compatible" content="IE=edge"/> 1 3.视口(快捷键:meta:vp) <meta name="viewport" content="maximum…
移动端meta 解释 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> 代表设备(电脑,平板,手机,tv,打印设备)name属性值: content属性值 : width: 把页面宽度设置为设备宽度,值可为数字或关键词 device-width: inti…
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0, user-scalable=no"> <!-- 定义这个东西,让他屏幕大小适应手机端--> <meta name="viewport" content="width=device-width, initial-scal…
Meta基础知识: H5页面窗口自动调整到设备宽度,并禁止用户缩放页面<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 可隐藏地址栏,仅针对IOS的Safari(注:IOS7.0版本以后,safari上已看不到效果) <meta name="…
分类 在介绍移动端特有 meta 标签之前,先简单说一下 HTML meta 标签的一些知识. meta 标签包含了 HTTP 标题信息 (http-equiv) 和 页面描述信息 (name). http-equiv: 该枚举的属性定义,可以改变服务器和用户代理行为的编译.编译的值取content 里的内容.简单来说即可以模拟 HTTP 协议响应头. 最常见的大概属于 Content-Type 了,设置编码类型.如 <meta http-equiv="Content-Type"…
<!DOCTYPE html><!--[if lt IE 7]> <html dir="ltr" lang="en-US" class="ie6"> <![endif]--><!--[if IE 7]> <html dir="ltr" lang="en-US" class="ie7"> <![endif]--&…
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><!-- 默认使用最新浏览器 --> <meta http-equiv="Cache-Control" content…
下面介绍meta标签的几个属性,charset,content,http-equiv,name. 一.charset 此特性声明当前文档所使用的字符编码,但该声明可以被任何一个元素的lang特性的值覆盖,此特性的值必须是一个符合由IANA所定义的字符编码首选MIME名称之一,鼓励使用UTF-8. 二.content 基于内容,这个属性为http-equiv或name属性提供了与其相关的值的定义. 三.http-equiv equiv的全称是"equivalent",意思是相等,相当于.…
现在的手机或平板电脑等移动设备上的浏览器默认都有双击放大的设置,如何阻止双击放大?user-scalable=no <!-- 禁止缩放 --> <meta name=”viewport” content=”width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no”> <!-- 删除苹果默认的工具栏和菜单栏 --> <meta name="apple-mobile-web…
meta标签,是head区的辅助标签 HTML代码如下: <meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scal…
伴随着web app的不断火热,移动端可以说是未来的大趋势了,下面是常用的一下meta <!-- 声明文档使用的字符编码 --> <meta charset='utf-8'> <!-- 优先使用 IE 最新版本和 Chrome --> <meta name="flexible" content="initial-dpr=1"/> <meta http-equiv="X-UA-Compatible&quo…
写的代码,在pc端运行正常,在移动端就很小很小,需要放大.这时候可引入这个标签 @参考博客 用法,在<head></head>中添加<meta name="viewport"标签,如 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=10.2"> 各项含义: width 设置layout…
meta标签主要辅助HTML结构层的.meta标签不管在互联网前端还是在移动端都起了很重要的作用. <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user…
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> 这个用的最多, width和height指令分别指定视区的逻辑宽度和高度.他们的值要么是以像素为单位的数字,要么是一个特殊的标记符号.width指令使用device-width标记可以指示视区宽度应为设备…
1.   强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览. <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/> 2.   WebApp全屏模式   隐藏地址栏. <meta name="apple-mobile-web-ap…
meta标签 <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />…
摘自http://www.cnblogs.com/shxydx/articles/2856882.html   控制显示区域各种属性: <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> width                      - viewport的宽度 height      …
(转自http://www.cssue.com/xhtml-css/html5-css3/mobile-meta.html,版权归原作者所有!) 移动平台对 meta 标签的定义 一.meta 标签分两大部分:HTTP 标题信息(http-equiv)和页面描述信息(name). 1.http-equiv 属性的 Content-Type 值(显示字符集的设定) 说明:设定页面使用的字符集,用以说明主页制作所使用的文字语言,浏览器会根据此来调用相应的字符集显示 page 内容. 用法: 1 <m…
控制显示区域各种属性: <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> 说明 width - viewport的宽度 height – viewport的高度 initial-scale - 初始的缩放比例 minimum-scale - 允许用户缩放到的最小比例 maximum-scale…
1.<meta charset="utf-8"> 2.<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> 3.<meta content="telephone=no"  name="format-detection"&…
1.   强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览. <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/> ///////最常用的 2.   WebApp全屏模式   隐藏地址栏. <meta name="apple-m…
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" /> width: viewport 的宽度 (范围从 200 到 10,000 ,默认为 980 像素 ) height: viewport 的高度 (范围从 223 到 10,000 ) initial-scale: 初始的缩放比例 (范围从>0到 1…
网页作者: <meta name="author" content="name, email@gmail.com"/>声明文档使用的字符编码: <meta charset='utf-8'><!-- 为移动设备添加 viewport --> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-sca…
<!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --><html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa --><head> <!-- 声明文档使用的字符编码 --> <meta charset='utf-8'> <!-- 优先使用 IE 最新版本和 Chrome -->…
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> width 和height指令分别指定视区的逻辑宽度和高度.他们的值要么是以像素为单位的数字,要么是一个特殊的标记符号.width指令使用device- width标记可以指示视区宽度应为设备的屏幕宽度.类似地h…
var phoneWidth = parseInt(window.screen.width); var phoneScale = phoneWidth / 640; var ua = navigator.userAgent; if (/Android (\d+\.\d+)/.test(ua)) { var version = parseFloat(RegExp.$1); if (version > 2.3) { document.write('<meta name="viewport…
<meta name="viewport" content=" width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/> ;…
<!-- 为移动设备添加 viewport --> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> 说明: width - viewport的宽度 height – viewport的高度 initial-scale - 初始的缩放比例 minimum-scale - 允许用户缩放到…