html5可以通用的几段代码

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模板——通用

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<meta name="format-detection" content="telephone=no">

<meta name="format-detection" content="email=no">

<link rel="stylesheet" href="index.css">

这里开始内容

viewport模板 – target-densitydpi=device-dpi，android 2.3.5以下版本不支持
01
<meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi"><!-- width取值与页面定义的宽度一致 -->

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<meta name="format-detection" content="telephone=no">

<meta name="format-detection" content="email=no">

<link rel="stylesheet" href="index.css">

这里开始内容

移动端如何定义字体font-family
中文字体使用系统默认即可，英文用Helvetica

body{font-family:Helvetica;}
移动端字体单位font-size选择px还是rem
对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可
对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备
rem配置参考：
html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}

时间： 2024-10-23 11:25:50

html5可以通用的几段代码的相关文章

JavaScript与html5写的贪吃蛇完整代码

JavaScript与html5写的贪吃蛇完整代码 查看运行效果可访问http://www.codesocang.com/texiao/youxitexiao/2014/0402/7045.html# <!doctype html><html lang="en"><head><meta charset="utf-8"><title>js网页版的贪吃蛇游戏</title><style typ

HTML5游戏实战之20行代码实现打地鼠

之前写过一篇打地鼠的博客70行的代码实现打地鼠游戏,细致思考过后,发现70行代码都有点多余了,应用tangide的控件特性,能够将代码量缩减到20行左右. 先show一下终于成果,点击试玩:打地鼠.或者扫描二维码: 假设你想在这个游戏上改进.点击这里. 開始解说之前,打个广告.欢迎html5游戏开发爱好者扫描下方二维码或者搜群号223466431,增加开发人员QQ群,我们免费提供最高速的开发工具.我们的全部html5游戏都开源. 整个游戏的开发.基于在线H5游戏开发工具TangIDE,相关开发文

值得收藏！16段代码入门Python循环语句

[ 导读 ]本文重点讲述for语句和while语句.for语句属于遍历循环,while语句属于当型循环.除了两个循环语句外,还介绍了break.continue与pass三个用于控制循环结构中的程序流向的语句.在此基础之上,也介绍了列表推导式,这是一种特殊的循环语句. 循环语句又称为重复结构,用于反复执行某一操作.面对大数量级的重复运算,即使借助计算机,重复编写代码也是费时的,这时就需要借助循环语句.使用循环语句一般要用到条件判断,根据判断式的返回值决定是否执行循环体. 循环分为两种模式,一种是

viewpager 自动无限循环 这段代码移到你的程序中就可以用了

本程序需要懂得viewpager的基础知识,也就是说你能够自己写出一个手动滑动的viewpager,下面我将附带加小圆点的知识 那么我们回顾一下图片轮转的基础知识,如果你已经对viewpager很熟悉了就不用看了,浪费时间 1.viewpager是在v4兼容报里面的,使用控件时请带上报名 2.数据来源用list存放,我这里用的是textview做的小圆点list<textview>,layout做的单张幻灯片list<view>,将xml文件inflate成为view,View.i

iOS测试一段代码的运行时间

王刚韧 23:19:26测试一段代码的运行时间 测试一段代码运行花了多久: NSDate* tmpStartData = [NSDate date] ;<#代码#> double deltaTime = [[NSDate date] timeIntervalSinceDate:tmpStartData]; NSLog(@"------cost time = %f ms(毫秒)", deltaTime*1000);

看到一段代码不明白什么意思

from warnings import filterwarnings, catch_warnings with catch_warnings():     if sys.py3kwarning:         filterwarnings("ignore", ".*mimetools has been removed",                         DeprecationWarning)     import mimetools import

从一段代码看fork()函数及其引发的竞争

首先来看一段从<UNIX环境高级编程>中摘录的一段非常有意思的代码.借此我们再来谈谈fork()函数的一些问题. #include "apue.h" static void charatatime(char*); int main(void) { pid_t pid; if((pid=fork())<0){ err_sys("fork error"); }else if(pid==0){ charatatime("output from

将PC端的网站转化成手机端网站需要增加以下这段代码即可，再布局一下界面即可

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" /> 将PC端的网站转化成手机端网站需要增加以下这段代码即可,再布局一下界面即可,布布扣,bubuko.com

基于jQuery的让非HTML5浏览器支持placeholder属性的代码（转）

效果图:http://code.google.com/p/jquery-placeholder-js/ 演示代码:http://demo.jb51.net/js/2011/jqueryplaceholder/打包下载:http://xiazai.jb51.net/201105/yuanma/jqueryplaceholder.rar 基于jQuery的让非HTML5浏览器支持placeholder属性的代码(转),布布扣,bubuko.com