001-移动端页面头部设置

1 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
2 <meta name="apple-mobile-web-app-capable" content="yes">
3 <meta name="apple-touch-fullscreen" content="yes">
4 <meta name="apple-mobile-web-app-status-bar-style" content="black">
5 <meta name="format-detection" content="telephone=no">
6 <title>Title</title>
7 <link rel="apple-touch-icon-precomposed" href="images/">
8 <link rel="apple-touch-startup-image" href="images/">
9 <link rel="stylesheet" href="css/style.css">

第2、3行都是全屏

第4行是电池电量条的背景颜色不让手机识别

这meta的作用就是删除默认的苹果工具栏和菜单栏。

content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时,这个行meta就不用加了,默认就是显示。

第5行format-detection翻译成中文的意思是“格式检测”

一、telephone

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

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

meta name="format-detection" content="adress=no"

也可以连写:meta name="format-detection" content="telephone=no,email=no,adress=no"

telephone=no就禁止了把数字转化为拨号链接!
telephone=yes就开启了把数字转化为拨号链接,要开启转化功能,这个meta就不用写了,在默认是情况下就是开启!

二、email

告诉设备不识别邮箱,点击之后不自动发送

email=no禁止作为邮箱地址!
email=yes就开启了把文字默认为邮箱地址,这个meta就不用写了,在默认是情况下就是开启!

三、adress

adress=no禁止跳转至地图!
adress=yes就开启了点击地址直接跳转至地图的功能,在默认是情况下就是开启!

原文地址:https://www.cnblogs.com/lisy001/p/9199326.html

时间: 2024-10-11 03:14:10

001-移动端页面头部设置的相关文章

html5移动端页面分辨率设置及相应字体大小设置的靠谱使用方式

对于动端网页编写CSS网上有很多介绍的文章,但在实际使用过程中还是会纠结. 网上的资料太多,且大多都是技术介绍型,特别是针对android上,网上写的各种麻烦,各种复杂,各种不接地气儿... 我在做移动端网页时,总是和美工设计的页面有出入,主要还是由于双方对移动端HTML5实现页面还了解还不够. 今天就研究一下各大互联网公司对于移动端页面的处理方式. 主要研究对象:BAT(度娘,阿狸,企鹅)这几家的移动端网站或webapp 主要研究点:viewport的设置,字体的设置,图片原始宽高设置 汝甚吊

移动端页面头部定义

我们在开发移动端页面的时候经常会遇到一些通用的需求,往往是,不支持缩放,苹果浏览器隐藏工具栏啊等等.我们总结一下: 1 <head> 2 <meta charset="utf-8"> 3 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 4 <title>项目名称</title> 5 <meta name=

移动端页面头部解析

viewport(视口) 视口可控制网页在移动设备上的显示方式.如果未指定视口,移动设备将以典型桌面屏幕的宽度来呈现网页,并调整网页使其适合屏幕大小.通过设置视口,您可以控制网页在不同设备上的宽度和缩放比例.下图是safari开发者文档中的图示: ViewPort 标记 ViewPort 标记用于指定用户是否可以缩放Web页面,如果可以,那么缩放到的最大和最小缩放比例是什么.使用ViewPort 标记还表示文档针对移动设备进行了优化.ViewPort 标记的content值是由指令及其值组成的以

移动端页面开发的一些常用的设置

viewport 视口(可视区窗口)设置详解 当我们试图在iPhone中输出屏幕宽度的时候,会发现屏幕宽度是980,居然和pc屏幕宽度差不多大 苹果主导的这些手机厂商,为了使用户获得完整的WEB体验,很多设备都会欺骗浏览器返回一个数值较大的视口,告诉浏览器,别以为我身子小,但是我想以980px宽度显示这个页面(分辨率和视口没有关系(开发中根据视口来算的)) 视口对于我们实现响应式是很不方便的.980太大了,不符合我们心中的期待,我们心中认为手机屏幕尺寸应该在320到400之间 默认不设置view

cordova StatusBar插件的使用(设置手机状态栏颜色和页面头部颜色一致),做出和原生一样的页面效果体验

cordova StatusBar插件的使用(设置手机状态栏颜色和页面头部颜色一致),做出和原生一样的页面效果体验设置设备状态栏背景颜色 StatusBar.backgroundColorByHexString('#11c1f3')://设置数值类型 StatusBar.backgroundColorByName("white"); //设置名称类型 可以去参考 StatusBar插件的js源代码,里面很多设置方法. var namedColors = {    "black

移动web页面头部书写

HTTP 标题信息(http-equiv) 和页面描述信息(name) http-equiv:该枚举的属性定义,可以改变服务器和用户代理行为的编译.编译的值取content 里的内容.简单来说即可以模拟 HTTP 协议响应头.最常见的大概属于Content-Type了,设置编码类型.如 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> H5中可以简化为 <me

iOS开发实用技巧——在html页面头部弹出app应用下载提示

iOS开发实用技巧——在html页面头部弹出app应用下载提示 本文介绍其简单使用: 第一步:在本地建立一个访问的服务端. 打开本地终端,在本地新建一个文件夹,在该文件夹中存放测试的html页面. 在终端输入一行代码:python -m SimpleHTTPServer ---第二步:配置环境 打开safari,偏好设置->勾选 "在菜单栏中显示开发菜单",如下图所示. 第三步:编写html文件 在测试文件appdown.html中编写的测试代码如下: `说明`444934666

pc端页面在移动端显示问题

1.pc端页面在移动端显示,默认视口宽度是980px(也就是body宽度是980px),可通过meta标签设置为需要的尺寸,比如页面中元素最大宽度是1220px,则如下所示 <meta name="viewport" content="width=1220"> 2.如果不想让页面有水平滚动条又有元素需要固定在屏幕底部,则可以按以下方法操作 1)给html页面设置视口宽度 2)判断是否为移动设备,对pc和移动设备分别设置样式,如下: $(function(

HTML5新结构标签和移动端页面布局

--------------------HTML5新结构标签--------------------1.h5新增的主要语义化标签如下: 1.header 页面头部.页眉 2.nav 页面导航 3.article 一篇文章 4.section 文章中的章节 5.aside 侧边栏 6.footer 页面底部.页脚pc端兼容需要引用对应的js脚本<script type="text/javascript" src="//cdn.bootcss.com/html5shiv/r