关于meta知多少

简介: 本来打算写关于手机端的知识,想了想先从meta着手。接下来请大家看几个网站的例子。一、天猫(http://m.tmall.com) 天猫触屏版 二、淘宝(http://m.

本来打算写关于手机端的知识,想了想先从meta着手。接下来请大家看几个网站的例子。

一、天猫(http://m.tmall.com)

<title>天猫触屏版</title> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">     
<meta charset="utf-8">             
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">     
<meta content="yes" name="apple-mobile-web-app-capable">     
<meta content="black" name="apple-mobile-web-app-status-bar-style">     
<meta content="telephone=no" name="format-detection">    



二、淘宝(http://m.taobao.com)

<title>淘宝网触屏版</title>
<meta charset="utf-8">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no" name="format-detection">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta property="wb:webmaster" content="c51923015ca19eb1">
<meta name="author" content="m.taobao.com">
<meta name="copyright" content="Copyright ©m.taobao.com 版权所有">
<meta name="revisit-after" content="1 days">
<meta name="keywords" content="">
<meta name="description" content="">



三、京东(http://m.jd.com)

<title> 京东 - 手机版 </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
<meta name="format-detection" content="telephone=no">
<meta name="Keywords" content="手机购物,WAP商城,日用百货,3C家电,汽车用品"><meta name="description" content="京东手机版提供了包括数码、家电、手机、电脑配件、网络产品、日用百货等数万种商品,手机快捷购物,就上京东手机版。">  



四、网易(http://3g.163.com)

<title>手机网易网</title>
<meta charset="UTF-8">
<meta content="width=device-width,user-scalable=no" name="viewport">
<meta name="apple-itunes-app" content="app-id=425349261">
<meta name="apple-mobile-web-app-capable" content="yes">



五、百度(http://m.baidu.com)

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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指元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。 标签位于文档的头部,不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。

手机端特有的有哪些?

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">     
<meta content="yes" name="apple-mobile-web-app-capable">     
<meta content="black" name="apple-mobile-web-app-status-bar-style">     
<meta content="telephone=no" name="format-detection"> 

第一个meta标签表示:强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览;

width - viewport的宽度 height - viewport的高度   
initial-scale - 初始的缩放比例  
minimum-scale - 允许用户缩放到的最小比例   
maximum-scale - 允许用户缩放到的最大比例  
user-scalable - 用户是否可以手动缩放

 

第二个meta标签是iphone设备中的safari私有meta标签,它表示:允许全屏模式浏览;
第三个meta标签也是iphone的私有标签,它指定的iphone中safari顶端的状态条的样式;

在web app应用下状态条(屏幕顶部条)的颜色;
默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)。
注意:若值为“black-translucent”将会占据页面px位置,浮在页面上方(会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px)。 


第四个meta标签表示:告诉设备忽略将页面中的数字识别为电话号码。


参考:
1、百度百科meta

2、手机网站前端设计

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

4、手机端的一些标准  

5、HTML <meta> 标签





目录
相关文章
|
Java 关系型数据库 MySQL
【实训项目】基于JavaWeb的图书销售购物系统
【实训项目】基于JavaWeb的图书销售购物系统
289 0
|
7月前
|
算法 数据安全/隐私保护 索引
基于GWO灰狼优化的多目标优化算法matlab仿真
本程序基于灰狼优化(GWO)算法实现多目标优化,适用于2个目标函数的MATLAB仿真。使用MATLAB2022A版本运行,迭代1000次后无水印输出结果。GWO通过模拟灰狼的社会层级和狩猎行为,有效搜索解空间,找到帕累托最优解集。核心步骤包括初始化狼群、更新领导者位置及适应值计算,确保高效探索多目标优化问题。该方法适用于工程、经济等领域复杂决策问题。
|
10月前
|
C语言
C语言编程中,错误处理至关重要,能提升程序的健壮性和可靠性
C语言编程中,错误处理至关重要,能提升程序的健壮性和可靠性。本文探讨了C语言中的错误类型(如语法错误、运行时错误)、基本处理方法(如返回值、全局变量、自定义异常处理)、常见策略(如检查返回值、设置标志位、记录错误信息)及错误处理函数(如perror、strerror)。强调了不忽略错误、保持处理一致性及避免过度处理的重要性,并通过文件操作和网络编程实例展示了错误处理的应用。
278 4
详细解读CList使用方法
详细解读CList使用方法
287 3
|
Oracle 关系型数据库
oracle的start with connect by prior如何使用 整理
oracle的start with connect by prior如何使用 整理
767 4
|
测试技术 计算机视觉
斯坦福新研究提升大模型长视频理解能力
【2月更文挑战第29天】斯坦福大学研究团队开发的VideoAgent系统在长视频理解上取得突破,提升了大型语言模型处理视频内容的能力。该系统通过模拟人类认知过程,以高效(平均8.4帧)实现高准确率(54.1%和71.3%的零样本准确率),在EgoSchema和NExT-QA基准测试中超越现有最佳方法。VideoAgent借鉴人类观看视频的方式,迭代选择关键帧进行信息提取和推理,为长视频理解设定新标准。论文链接:[arxiv.org/pdf/2403.10517.pdf](https://arxiv.org/pdf/2403.10517.pdf)
420 1
斯坦福新研究提升大模型长视频理解能力
|
消息中间件 缓存 监控
go-zero微服务实战系列(六、缓存一致性保证)
go-zero微服务实战系列(六、缓存一致性保证)
|
弹性计算 网络协议 API
原生Claude3免魔法本地轻松上手,这3步你必须要知道
本文详细介绍了如何在阿里云ECS上部署LobeChat,并通过Cloudflare实现Claude3 API的代理访问。首先准备ECS、Claude3 API密钥及域名,接着通过Docker部署LobeChat,并配置相关环境变量。然后,在Cloudflare上创建站点并部署API代理,最后通过SSH端口映射在本地访问LobeChat。文中提供了具体步骤与示例代码,帮助读者顺利完成部署,体验高效便捷的AI聊天功能。
1543 2
若依修改,修改代理线上接口登录后台,若依框架如何使用线上的接口,如何在本地获取网页上的接口
若依修改,修改代理线上接口登录后台,若依框架如何使用线上的接口,如何在本地获取网页上的接口
|
数据安全/隐私保护
阿里云智能媒体服务IMS
【2月更文挑战第22天】阿里云智能媒体服务IMS
258 7