手机web网页制作的认识(有关meta标签)

 近日以来一直在看JQuery Mobile 一个手机开发框架,说实话真的很头疼的~~~~ 因为里面有很多的属性、方法和事件~~~

下面是手机网页的一些认识:

    一、<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">

    网页手机wap2.0网页的head里加入下面这条元标签,在iPhone的浏览器中页面将以原始大小显示,并不允许缩放。  
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">   
width - viewport的宽度 height - viewport的高度   
initial-scale - 初始的缩放比例  
minimum-scale - 允许用户缩放到的最小比例   
maximum-scale - 允许用户缩放到的最大比例  
user-scalable - 用户是否可以手动缩放 

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

当该 HTML 页面在手机上浏览时,该标签用于指定是否将网页内容中的手机号码显示为拨号的超链接。

在 iPhone 上默认值是:

<meta name="format-detection" content="telephone=yes"/>

如果你不希望手机自动将网页中的电话号码显示为拨号的超链接,那么可以这样写:

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

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

说明:网站开启对web app程序的支持。

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

说明:

  • 在web app应用下状态条(屏幕顶部条)的颜色; 
  • 默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)。

注意:若值为“black-translucent”将会占据页面px位置,浮在页面上方(会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px)。

 !!!!苹果web app其他设置:

当然,配合web app的icon 和 启动界面需要额外的两端代码进行设定,如下所示:

<link rel="apple-touch-icon-precomposed" href="iphone_milanoo.png" />

说明:这个link就是设置web app的放置主屏幕上icon文件路径

使用:

  • 该路径需要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录。 
  • 图片尺寸可以设定为57*57(px)或者Retina可以定为114*114(px),ipad尺寸为72*72(px)
<link rel="apple-touch-startup-image" href="milanoo_startup.png" />

说明:这个link就是设置启动时候的界面(图片五),放置的路劲和上面类似。

使用:

  • 该路径需要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录。 
  • 官方规定启动界面的尺寸必须为 320*640(px),原本以为Retina屏幕可以支持双倍,但是不支持,图片显示不出来。

五、<meta name="apple-touch-fullscreen" content="yes">"添加到主屏幕“后,全屏显示 <meta name="apple-mobile-web-app-capable" content="yes" />
这meta的作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时,这个行meta就不用加了,默认就是显示。
<meta content="telephone=no" name="format-detection" />
<meta content="email=no" name="format-detection" />//将不识别邮箱
告诉设备忽略将页面中的数字识别为电话号码 
iOS用rel="apple-touch-icon",android 用rel="apple-touch-icon-precomposed"。这样就能在用户把网页存为书签时,在手机HOME界面创建应用程序样式的图标。

 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gbk" />
<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="YES">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

----------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="keywords" content="">

----------------------------------------------------------------------------------------------------------------------------


 


<meta name="apple-mobile-web-app-capable" content="yes">  
<meta name="apple-mobile-web-app-status-bar-style" content="black" />  
<meta http-equiv="content-type" content="text/html; charset=gb2312">  
<meta name="HandheldFriendly" content="True">  
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=no">  
<meta name="apple-touch-fullscreen" content="YES" />  
<meta name="viewport" content="width=device-width,maximum-scale=1.0,initial-scale=1.0,user-scalable=no"/>  
<meta name="format-detection" content="telephone=no"/>

转载于:https://www.cnblogs.com/qiandanwu/p/5783835.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/395292.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

包打包和解析过程 unity_Unity学习—资源管理概览

本文介绍了 Unity 常用四种默认路径&#xff0c;以及 AssetDataBase、Resources、AssetBundle 和目前最新的 Addressable 四种资源管理方式文中所有 API 均以版本 2019.3 为准本文原地址&#xff1a;Unity学习—资源管理概览资源路径Application.dataPath官方文档只读&#xff…

graphql tools_声明式GraphQL:编写更少的代码,并使用graphql-tools完成更多工作

graphql toolsI’ve been working with GraphQL for a few months now, but only recently began using Apollo’s graphql-tools library. After learning a few idioms, I am able to mock up a functional API quickly. This is largely due to its low-code, declarative a…

用idea搭建SSM项目,原来这么简单

目录 前言软件环境创建项目数据库文件配置文件pom.xmllog4j.propertiesjdbc.propertiesapplicationContext.xmlspring-mvc.xmlweb.xml运行项目编写代码前言 前阵子突发奇想&#xff0c;想学习下SpringMVC的源码&#xff0c;于是打算用idea搭建一个简易的maven版SSM案例&#xf…

浙江理工大学计算机组成原理试卷,浙江理工大学计算机组成原理设计试题.doc...

计算机组成原理课程设计报告2013/2014第二学期指导教师&#xff1a;许建龙 张芳班级&#xff1a;12计科2班姓名&#xff1a;学号&#xff1a; 计算机组成原理大型实验任务书(计算机12级1、2、3班和实验班)实验目的&#xff1a;深入了解计算机各种指令的执行过程&#xff0c;以及…

mac vagrant 虚拟机nfs挂载点

需求&#xff1a;在mac 上安装了虚拟机&#xff0c;虚拟机系统为centos6.5&#xff0c;现在希望讲虚拟机上点目录通过nfs共享给mac使用 下面主要描述通过nfs共享目录给mac调用的过程 过程参考网址&#xff1a; http://www.moqifei.com/archives/1534 &#xff08;我主要参考的这…

nodejs中require的路径是一个文件夹时发生了什么

node中使用require的时候如果路径是一个文件夹时&#xff0c;或者特殊的情况require(..);require(.); 这是node实战这本书里说的情况&#xff0c;但是我在node6.9版本中发现不完全是这样&#xff0c;可能是后来做了修改。下面说说在6.9下require路径的过程。 这里以require(.)说…

python调用ctypes中windll中的方法超时处理_python中使用ctypes调用MinGW生成的动态链接库(dll)...

关于gcc编译dll的我就不说了&#xff0c;网上举例一大堆&#xff0c;下面以g为例。假设有一个test.cpp文件如下&#xff1a;extern "C" {__declspec(dllexport) double add(double x,double y);}double add(double x,double y){return xy;}在MinGW中使用g编译&#x…

惯用过程模型_惯用的Ruby:编写漂亮的代码

惯用过程模型Ruby is a beautiful programming language.Ruby是一种美丽的编程语言。 According to Ruby’s official web page, Ruby is a:根据Ruby的官方网页&#xff0c;Ruby是&#xff1a; “dynamic, open source programming language with a focus on simplicity and …

采用晶体管为基本元件的计算机发展阶段是,计算机应用基础知识点

第一章 计算机基础知识1、计算机发展阶段第一代&#xff1a;电子管计算机采用电子管为基本元件&#xff0c;设计使用机器语言或汇编语言。要用于科学和工程计算 第二代&#xff1a;晶体管计算机采用晶体管为基本元件&#xff0c;程序设计采用高级语言&#xff0c;出现了操作系统…

springcloud系列三 搭建服务模块

搭建服务模块为了模拟正式开发环境,只是少写了service层直接在controller里面直接引用,直接上图和代码:更为方便: 创建完成之后加入配置: pom.xml文件: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM…

P1801 黑匣子_NOI导刊2010提高(06)

题目描述 Black Box是一种原始的数据库。它可以储存一个整数数组&#xff0c;还有一个特别的变量i。最开始的时候Black Box是空的&#xff0e;而i等于0。这个Black Box要处理一串命令。 命令只有两种&#xff1a; ADD(x):把x元素放进BlackBox; GET:i加1&#xff0c;然后输出Bla…

MySql模糊查询

常规like的使用限制&#xff1a; 1. like %keyword &#xff1a;索引失效&#xff0c;使用全表扫描。但可以通过翻转函数like前模糊查询建立翻转函数索引走翻转函数索引&#xff0c;不走全表扫描。 2. like keyword% &#xff1a;索引有效。 3. like %keyword% &#xff1a;索引…

python psycopg2使用_python 操作数据库:psycopg2的使用

1 conn psycopg2.connect(database"testdb", user"postgres",password"cohondob", host"127.0.0.1", port"5432")这个API打开一个连接到PostgreSQL数据库。如果成功打开数据库时&#xff0c;它返回一个连接对象。2cursor c…

软件测试人员棘手的问题,Èí¼þ²âÊԵļ¬ÊÖÎÊÌ⣺ÈçºÎ±ÜÃâÖظ´ÌύȱÏÝ...

¡¡¡¡£££©£¡££¡££££©©£¡¡¡¡¡BUG£££¢¡£££¡££¡£¡£——£…

机器学习实用指南_机器学习方法:实用指南

机器学习实用指南by Karlijn Willems通过Karlijn Willems 机器学习方法&#xff1a;实用指南 (How Machines Learn: A Practical Guide) You may have heard about machine learning from interesting applications like spam filtering, optical character recognition, and …

本地仓库settings.xml中使用阿里的仓库

背景 当前使用eclipse自带的maven碰到两个蛋疼的问题&#xff1a; maven在国内使用如果不进行FQ则会痛苦不堪如便秘。maven下载大量jar包导致某盘不够用&#xff0c;需要换大的分区。因此为了解决这个问题就介绍两个eclipse配置&#xff1a;maven本地路径配置和maven外部路径配…

day6_python之md5加密

#md5是不可逆的&#xff0c;就是没有办法解密的 Python内置哈希库对字符串进行MD5加密的方法-hashlibimport hashlib def my_md5(s,salt): #用函数&#xff0c;为了提高代码的复用率s ssalt #1.必须是字符串news str(s).encode() #2.字符串需要encode编码后&#xff0…

异步服务_微服务全链路异步化实践

1. 背景随着公司业务的发展&#xff0c;核心服务流量越来越大&#xff0c;使用到的资源也越来越多。在微服务架构体系中&#xff0c;大部分的业务是基于Java 语言实现的&#xff0c;受限于Java 的线程实现&#xff0c;一个Java 线程映射到一个kernel 线程&#xff0c;造成了高并…

win7打开计算机死机,怎么样解决Win7系统运行程序引起的死机问题

Win7系统不仅需要使用到电脑中自带的一些程序&#xff0c;同时&#xff0c;也需要在win7旗舰版电脑中有选择的自己去安装一些程序。但是经常有用户会碰到Win7电脑突然跳出运行程序未响应&#xff0c;出现电脑死机的情况&#xff0c;特别是开的浏览器窗口多的时候更是死机的频繁…

(poj)1064 Cable master 二分+精度

题目链接&#xff1a;http://poj.org/problem?id1064 DescriptionInhabitants of the Wonderland have decided to hold a regional programming contest. The Judging Committee has volunteered and has promised to organize the most honest contest ever. It was decided…