- 浏览: 3315626 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (567)
- Web前端-html/表单 (19)
- Web前端-CSS (24)
- Web前端-CSS框架 (4)
- Web前端-JS语言核心 (50)
- Web前端-JS客户端 (26)
- nodejs生态+grunt (10)
- seajs和requirejs (9)
- backbone等框架 (7)
- 模板基础 (7)
- Web前端-deps(不改动) (6)
- Web前端-component (10)
- Web前端-jquery-plugin (13)
- 浏览器兼容性 (6)
- Web前端-使用jQuery (25)
- Web前端-使用jqueryui (6)
- Web前端-性能优化 (3)
- Web协议-HTTP (6)
- ExtJS (13)
- PHP (22)
- PHP面向对象 (4)
- PHP扩展-SOAP (6)
- PHP扩展-curl (4)
- PHP与HTML(导出) (5)
- PHP扩展-综合 (7)
- mysql基础应用 (18)
- 技术心情 (18)
- 算法和面试题 (17)
- 工具(开发)使用 (36)
- memcached原理 (2)
- session和cookie (4)
- UML (2)
- Web前端_FusionCharts (5)
- Web前端_Flex (4)
- Web前端_JSP (3)
- JavaSE (10)
- JavaEE (4)
- tomcat (2)
- Servlet开发 (3)
- Spring开发 (1)
- REST相关 (2)
- 大访问量、高并发 (2)
- 网络编程 (1)
- YII (21)
- linux命令和内核 (12)
- yii与数据库 (10)
- yii与表单 (12)
- yii view层 (1)
- perl (7)
- yii扩展 (7)
- shell (4)
- photoshop (7)
- 视觉设计 (2)
- 我关注的名人在路上 (4)
- 1-自学能力 (1)
- 2-人际沟通能力 (3)
- 3-职业规划能力 (7)
- 4-项目管理能力 (2)
- python (3)
- django (4)
- Mysql高级应用 (6)
- prototype.js (4)
- Web系统安全 (1)
- Web前端-mobile (2)
- egret (6)
- jQuery源码分析 (5)
- fis (4)
最新评论
-
yzq21056563:
感谢作者分享~请教下,http://www.lisa33xia ...
CSS基础:text-overflow:ellipsis溢出文本 -
u012206458:
$.ajax的error,complete,success方法 -
DEMONU:
谢谢,虽然不能给你赞助,但是要给你顶
mysql中key 、primary key 、unique key 与index区别 -
njupt_tolmes:
阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿滕庆亚 ...
CSS基础:text-overflow:ellipsis溢出文本 -
zenmshuo:
用过SpreadJS,也包含数据可视化的图表
推荐几个web中常用js图表插件
作者:zccst
<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标记可以指示视区宽度应为设备的屏幕宽度。类似地height指令使用device-height标记指示视区高度为设备的屏幕高度。
user-scalable指令指定用户是否可以缩放视区,即缩放Web页面的视图。值为yes时允许用户进行缩放,值为no时不允许缩放
initial-scale指令用于设置Web页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不同而有所差异。通常情况下设备会在浏览器中呈现出整个Web页面,设为1.0则将显示未经缩放的Web文档。
maximum-scale和minimum-scale指令用于设置用户对Web页面缩放比例的限制。值的范围为0.25至10.0之间。与initial-scale相同,这些指令的值是应用于视区内容的缩放比例。
所有智能手机浏览器都支持ViewPort <meta>标记的width和user-scalabel指令。但是Opera Mobile不使用user-scalable指令,而是主张用户应始终保留在移动浏览器中缩放Web页面的能力。
下面还真用得少
devicePixelRatio
window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。公式表示就是:window.devicePixelRatio = 物理像素 / dips
fit-to-screen网站自适应屏幕
如果content的值小于或等于screen width 网站自适应屏幕fit-to-screen将被关闭网站不会随着浏览器拉伸缩放
如果content的值大于screen width;fit-to-screen将开启
苹果浏览器相关
2015-07-08
<meta name="viewport" content="minimal-ui">
在iOS 7.1的Safari中为meta标签新增minimal-ui属性,让网页在加载时便可隐藏顶部的地址栏与底部的导航栏。
<meta name="apple-mobile-web-app-capable" content="yes">
是否启动webapp功能 设置为yes 网站就会在满屏模式full-screen mode删除默认的苹果工具栏和菜单栏
<meta name="apple-touch-fullscreen" content="yes">
开启对web app程序的支持
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no" />
iPhone会自动把你这个文字加链接样式、并且点击这个数字还会自动拨号!
telephone=no就忽略页面中的数字识别为电话号码
telephone=yes就开启了把数字转化为拨号链接,在默认是情况下就是开启!
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name=”"apple-mobile-web-app-status-bar-style" content=”black-translucent" />
控制状态栏显示样式 default(白色)black(黑色) black-translucent(灰色半透明)
link标签apple-touch-icon
如果 apple-mobile-web-app-capable 设置为 yes 了,那么在iPhone,iPad,iTouch的safari上可以使用添加到主屏按钮将网站添加到主屏幕上。
而通过设置相应 apple-touch-icon 标签,则添加到主屏上的图标就会使用我们指定的图片。
以下是针对ox不同设备,选择一个最优icon。默认iphone的大小为60px,ipad为76px,retina屏乘以2倍。
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
ios7以前系统默认会对图标添加特效(圆角及高光),如果不希望系统添加特效,则可以用 apple-touch-icon-precomposed.png 代替 apple-touch-icon.png
图标使用的优先级如下:
如果没有跟相应设备推荐尺寸一致的图标,那个会优先使用比推荐尺寸大,但最接近推荐尺寸的图标。
如果没有比推荐尺寸大的图标,会优先选择最接近推荐尺寸的图标。
如些有多个图标符合推荐尺寸,会优先选择包含关键字precomposed的图标。
如果未在区域指定用link标签指定图标,会自动搜索网站根目录下以 apple-touch-icon 为前缀的png图标。
注:ios7不再为icon添加特效,ios7以前则默认为icon添加特效,除非icon有关键字 -precomposed.png 为后缀。
IE浏览器
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 避免IE使用兼容模式
<meta name="MobileOptimized" content="320"> 微软为IE Mobile版设置的定义宽度标记
浏览器不会自动调整文件的大小,也就是说是固定大小,不会随着浏览器拉伸缩放。
<meta name="HandheldFriendly" content="true" />:是否对手持设备友好,只有true或者false
UC浏览器
<meta name="screen-orientation" content="portrait"> 强制竖屏
<meta name="full-screen" content="yes"> 强制全屏
<meta name="browsermode" content="application"> 应用模式
QQ浏览器
<meta name="x5-orientation" content="portrait"> 强制竖屏
<meta name="x5-fullscreen" content="true"> 强制全屏
<meta name="x5-page-mode" content="app"> 应用模式
360浏览器
<meta name="renderer" content="webkit"> 开启急速模式
<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标记可以指示视区宽度应为设备的屏幕宽度。类似地height指令使用device-height标记指示视区高度为设备的屏幕高度。
user-scalable指令指定用户是否可以缩放视区,即缩放Web页面的视图。值为yes时允许用户进行缩放,值为no时不允许缩放
initial-scale指令用于设置Web页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不同而有所差异。通常情况下设备会在浏览器中呈现出整个Web页面,设为1.0则将显示未经缩放的Web文档。
maximum-scale和minimum-scale指令用于设置用户对Web页面缩放比例的限制。值的范围为0.25至10.0之间。与initial-scale相同,这些指令的值是应用于视区内容的缩放比例。
所有智能手机浏览器都支持ViewPort <meta>标记的width和user-scalabel指令。但是Opera Mobile不使用user-scalable指令,而是主张用户应始终保留在移动浏览器中缩放Web页面的能力。
下面还真用得少
devicePixelRatio
window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。公式表示就是:window.devicePixelRatio = 物理像素 / dips
fit-to-screen网站自适应屏幕
如果content的值小于或等于screen width 网站自适应屏幕fit-to-screen将被关闭网站不会随着浏览器拉伸缩放
如果content的值大于screen width;fit-to-screen将开启
苹果浏览器相关
2015-07-08
<meta name="viewport" content="minimal-ui">
在iOS 7.1的Safari中为meta标签新增minimal-ui属性,让网页在加载时便可隐藏顶部的地址栏与底部的导航栏。
<meta name="apple-mobile-web-app-capable" content="yes">
是否启动webapp功能 设置为yes 网站就会在满屏模式full-screen mode删除默认的苹果工具栏和菜单栏
<meta name="apple-touch-fullscreen" content="yes">
开启对web app程序的支持
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no" />
iPhone会自动把你这个文字加链接样式、并且点击这个数字还会自动拨号!
telephone=no就忽略页面中的数字识别为电话号码
telephone=yes就开启了把数字转化为拨号链接,在默认是情况下就是开启!
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name=”"apple-mobile-web-app-status-bar-style" content=”black-translucent" />
控制状态栏显示样式 default(白色)black(黑色) black-translucent(灰色半透明)
link标签apple-touch-icon
如果 apple-mobile-web-app-capable 设置为 yes 了,那么在iPhone,iPad,iTouch的safari上可以使用添加到主屏按钮将网站添加到主屏幕上。
而通过设置相应 apple-touch-icon 标签,则添加到主屏上的图标就会使用我们指定的图片。
以下是针对ox不同设备,选择一个最优icon。默认iphone的大小为60px,ipad为76px,retina屏乘以2倍。
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
ios7以前系统默认会对图标添加特效(圆角及高光),如果不希望系统添加特效,则可以用 apple-touch-icon-precomposed.png 代替 apple-touch-icon.png
图标使用的优先级如下:
如果没有跟相应设备推荐尺寸一致的图标,那个会优先使用比推荐尺寸大,但最接近推荐尺寸的图标。
如果没有比推荐尺寸大的图标,会优先选择最接近推荐尺寸的图标。
如些有多个图标符合推荐尺寸,会优先选择包含关键字precomposed的图标。
如果未在区域指定用link标签指定图标,会自动搜索网站根目录下以 apple-touch-icon 为前缀的png图标。
注:ios7不再为icon添加特效,ios7以前则默认为icon添加特效,除非icon有关键字 -precomposed.png 为后缀。
IE浏览器
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 避免IE使用兼容模式
<meta name="MobileOptimized" content="320"> 微软为IE Mobile版设置的定义宽度标记
浏览器不会自动调整文件的大小,也就是说是固定大小,不会随着浏览器拉伸缩放。
<meta name="HandheldFriendly" content="true" />:是否对手持设备友好,只有true或者false
UC浏览器
<meta name="screen-orientation" content="portrait"> 强制竖屏
<meta name="full-screen" content="yes"> 强制全屏
<meta name="browsermode" content="application"> 应用模式
QQ浏览器
<meta name="x5-orientation" content="portrait"> 强制竖屏
<meta name="x5-fullscreen" content="true"> 强制全屏
<meta name="x5-page-mode" content="app"> 应用模式
360浏览器
<meta name="renderer" content="webkit"> 开启急速模式
发表评论
-
[html5]localStorage代替Cookie? HTML5本地存储安全性
2015-03-20 17:53 26370zccst转载 HTML5本地存储的前身就是Cookie,H ... -
[html5]触摸事件(touchstart、touchmove和touchend)
2015-02-13 20:28 29559作者:zccst 参考文章 ... -
meta name=viewport含义
2015-02-12 16:29 4025作者:zccst viewport中文 ... -
doctype和compatModel相关
2015-01-04 19:30 707作者:zccst 一、doctype 1,严格模式与混杂模 ... -
【转义字符】HTML 字符实体 < >: &等
2014-11-18 18:56 22956作者:zccst 2014-12-10 又 ... -
挖掘input type=file的新知识
2014-11-13 18:23 3098作者:zccst 文件上传,这个问题始终一知半解,今天又近真 ... -
div+css布局总结
2014-09-04 10:48 1422作者:zccst 3,position布局 #wrap ... -
文件上传的两种情况及mock时对应处理办法
2014-09-02 19:46 1706作者:zccst 1,给文件一个独立的url,要求文件上传至 ... -
attr与prop的区别
2014-07-09 18:20 961作者:zccst jQuery在1.6.1 ... -
HTML <label> 标签的 for 属性
2014-07-04 17:14 2044作者:zccst for 属性规定 label 与哪个表单元 ... -
设置frameset的高度
2014-01-26 13:22 2721zccst转载 原文: 这是使用frameset做的,在宽 ... -
天气接口API
2012-02-02 17:32 1337把下面代码粘贴到自己的页面里,就能显示天气了。 <if ... -
form表单深入理解
2011-11-23 20:12 2164作者:zccst form表单 一、表单基础 作用:用来向服 ... -
表单之input file的使用特点及在php.ini中的相关参数设置
2011-11-23 20:08 23331,控件 <input type= "fi ... -
文件编码
2011-07-04 18:35 1209今天第一次留意文件的编码格式。 改变方式:另存为时,可选择 ... -
html5新知识点
2011-05-12 22:53 1859作者:zccst 新技术 http://timelineap ... -
HTML 和 XHTML 区别
2011-05-12 22:24 1063这篇文章主要阐述 HTML 和 XHTML 的区别。简单来说, ... -
表单与ajax一并使用
2011-04-22 13:35 1185表单与ajax一并使用 一、表单需要注意的地方。 form ...
相关推荐
网易严选移动端meta适配方案,浏览器窗口改变字体等跟着变动 网易严选移动端meta适配方案,浏览器窗口改变字体等跟着变动 网易严选移动端meta适配方案,浏览器窗口改变字体等跟着变动
在移动端HTML5开发中,Meta标签扮演着至关重要的角色,它们可以帮助优化网页在移动设备上的显示效果,提高用户体验,同时也有利于搜索引擎优化(SEO)。本文将深入探讨移动平台的Meta标签,尤其是viewport、format-...
本文实例为大家分享了vue移动端左右滑动事件,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title></title> [removed][removed] <...
标题中的“META通用解锁工具MTK手机哦专用”指的是针对采用MediaTek(MTK)芯片的智能手机设计的一款解锁工具,其主要功能是帮助用户进行芯片级别的调试和解锁操作。MediaTek是一家知名的半导体公司,其生产的芯片...
* 可以通过 meta 标签来设置视口大小,例如 `<meta name="viewport" content="width=device-width, initial-scale=1.0">`。 5. vw 单位 * 不同设备的视口大小和像素比不同,同样的 vw 单位在不同的设备下意义是不...
### 移动端开发最佳实践概述 在当前数字化时代,移动端应用开发已成为企业与个人连接用户、提升用户体验的关键环节。本文档旨在分享一系列移动端APP开发的最佳实践,涵盖从设计到编码的全过程,帮助开发者构建高...
在HTML的head标签中,开发者通常会添加meta标签来定义viewport,例如`<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">`。这使得网页的宽度等于设备的...
这是一款手机端触屏滑动按拼音字母查询的多个城市选择器网页特效,zepto手机移动端拼音字母城市选择代码。 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <meta name=...
在移动端网页开发中,有时我们需要实现特定场景下的横屏显示,比如游戏、视频播放或一些特殊应用界面。本文将详细讲解如何实现移动端网页版的强制横屏功能,并确保即使手机设置为自动旋转,也能适应并保持横屏状态。...
首先,移动端标准设置涉及到HTML的`<meta>`标签,尤其是`viewport`属性。这个标签告诉浏览器如何调整网页的宽度和缩放以适应不同的移动设备。例如: ```html <meta name="viewport" content="width=device-width, ...
### D2-淘宝移动端Web开发实践 #### 移动端Web开发概述 随着移动互联网的兴起,越来越多的用户开始依赖手机、平板等移动设备来访问网络。为了更好地满足这一趋势,淘宝团队分享了一系列关于移动端Web开发的最佳实践...
多用于移动端,因为移动端屏幕小,可能需要查看大图。 具体实现代码 <!DOCTYPE html> <html> <meta charset="utf-8"/> <head runat="server"> <title>JQuery点击图片查看大图by starof...
诊断性meta分析手把教你做临床Meta分析——诊断试验性Meta-Disc分析 诊断性meta分析是Meta分析的一个重要局部,准确诊断性Meta分析是临床治疗的根底。本篇文章将向大家推荐一款专用于诊断性试验的免费Meta分析软件...
《jQuery手机移动端日期时间选择代码详解》 在现代网页开发中,用户界面的交互性和便捷性至关重要,尤其是在手机移动端。日期时间选择器是常见的UI组件之一,它允许用户方便地选取日期和时间,广泛应用于预约系统、...
**SP_META工具详解** 在移动设备的开发和调试过程中,Meta模式扮演着至关重要的角色。MTK(MediaTek)作为全球知名的芯片制造商,为开发者提供了一款名为SP_META的工具,便于进入Meta模式进行二次开发。本文将深入...
一、页面自定义meta标签 可以为每个页面单独设置不同的meta标签 以便于SEO 全局的meta标签在nuxt.config.js文件里配置 而单独的meta标签在组件的内部标签内进行配置即可 值得注意的是:hid属性是页面的唯一标识 若想...