Iphone Web开发meta说明

最新推荐文章于 2024-07-25 12:30:25 发布
最新推荐文章于 2024-07-25 12:30:25 发布
阅读量552 收藏 1
点赞数

 

1. iphone 各机型

 

机型 分辨率 像素比 物理分辨率 高* 宽 * 后 主屏对角线长度 重量 像素密度（ppi）
iphone4/iphone4s 320 * 480 2 640 * 960

4.5x2.31x0.37 in

115.2×58.6×9.3 mm

 3.5 in 137/140g  329.65
iphone5/iphone5s 320 * 568 2 640 * 1136 123.8×58.6×7.6 mm 4 in 112g  325.97
iphone6 375 * 667 2 750 * 1334

5.44x2.64x0.27 in

138.1x67x6.9 mm

 4.7 in 129g  325.61
iphone6+ 414 * 736 3 1242 * 2208

6.22x3.06x0.28 in

158.1x77.8x7.1mm

 5.5 in 172g  460.61

 

 

 

 

 

 

 

 

 

 

像素密度 = √{物理分辨率高度 ^ 2 + 物理分辨率宽度 ^ 2} / 主屏对角线长度

比如：

ppi(iphone4) = √{640 ^ 2 + 960 ^ 2} / 3.5 = 329.65

 

2.  apple-touch-startup-image

将页面添加到桌面主屏幕后，如果有这个标签的话

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

点击生成的图标就会进入app模式，这时，可以给其添加启动画面。

启动画面是一张图片，不同的机型，需要图片的大小不同，整理如下：

机型 分辨率 像素比 物理分辨率 图片分辨率  
iphone4/iphone4s 320 * 480 2 640 * 960 640 * 920  
iphone5/iphone5s 320 * 568 2 640 * 1136 640 * 1096  
iphone6 375 * 667 2 750 * 1334 750 * 1294  
iphone6+(portrait) 414 * 736 3 1242 * 2208 1242 * 2148  
iphone6+(landscape) 736 * 414 3 2208 * 1242 2208 * 1182  

 

 

 

 

 

 

 

 

 

图片的高度是物理像素高度减去顶部系统栏的 （20 * 像素比）px 

 

对应的meta标签为：

<!-- iphone4, iphone4s-->
<link rel="apple-touch-startup-image" href="/static/img/startup-640x920.png" media="(device-width: 320px) and (device-height: 480px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)"/>


<!-- iphone5, iphone5s-->
<link rel="apple-touch-startup-image" href="/static/img/startup-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)"/>


<!-- iphone6-->
<link rel="apple-touch-startup-image" href="/static/img/startup-750x1294.png" media="(device-width: 375px) and (device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)"/>


<!-- iphone6+ portrait-->
<link rel="apple-touch-startup-image" href="/static/img/startup-1242x2148.png" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)"/>


<!-- iphone6+ landscape-->
<link rel="apple-touch-startup-image" href="/static/img/startup-2208x1182.png" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)"/>

 

　　1) 可以支持哪些图片格式？ 

　　　　jpg、png、gif等都可以支持，gif图片只能识别第一帧。

　　2) <meta name="apple-mobile-web-app-capable" content="yes"> 是否必须有？

　　　　必须有，否则就不会进入app模式，也就不会有启动画面。

　　

3.  apple-mobile-web-app-capable 和 apple-touch-fullscreen

<meta name="apple-mobile-web-app-capable" content="yes"> 这个标签会起作用

<meta name="apple-touch-fullscreen" content="yes" /> 这个标签不起作用

注：iphone4s 和 iphone6 中测试

 

4. format-detection

safari 会自动识别页面中出现的手机号，点击后会弹出电话呼叫提示，如果不想safari自动识别，可以设置

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

 

至于email，我在iphone4s和iphone6上测试，并没有自动识别

 

5. apple-mobile-web-app-status-bar-style

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

以app模式启动时才起作用，设置顶部系统栏的样式，content有三个取值：default、black、black-translucent。

 

  iphone4s iphone6
  背景颜色 文字颜色 高度 背景颜色 文字颜色 高度
正常系统栏 白色 黑色 20 白色 黑色 20
不写该meta标签 黑色 黑色 20 白色 白色 20
default 黑色 黑色 20 白色 黑色 20
black 黑色 白色 20 黑色 黑色 20
black-translucent 透明 白色 0 透明 白色 0

 

 

 

 

 

 

black-translucent 时，webapp会覆盖在系统栏之上

 

6. apple-touch-icon

一般情况下，不需要一堆不同尺寸的icon，iphone下只需

<link rel="apple-touch-icon" sizes="144x144" href="/static/img/touch-icon-144.png" />

这一个尺寸就够用了

apple-touch-icon-precomposed

实际测试结果看来，不管有没有precomposed，都会对icon做圆角，至于阴影和抛光效果，实在是看不出来。

 

7. 各种UserAgent

 

系统 机型 应用 UserAgent  
 ios iphone6 微信  Mozilla/5.0 (iPhone; CPU iPhone OS 8_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Mobile/12B411 MicroMessenger/6.1 NetType/WIFI  
    safari  Mozilla/5.0 (iPhone; CPU iPhone OS 8_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12B411 Safari/600.1.4  
    safari添加到桌面  Mozilla/5.0 (iPhone; CPU iPhone OS 8_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Mobile/12B411  
   

safari添加到桌面

请求touch-icon和startup-image

  Web/1.0 CFNetwork/711.1.12 Darwin/14.0.0  
    uc浏览器  Mozilla/5.0 (iPhone; CPU iPhone OS 8_1 like Mac OS X; zh-CN) AppleWebKit/537.51.1 (KHTML, like Gecko) Mobile/12B411 UCBrowser/10.2.5.551 Mobile  
    qq浏览器  Mozilla/5.0 (iPhone 6; CPU iPhone OS 8_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/6.0 MQQBrowser/5.7 Mobile/12B411 Safari/8536.25  
    手机qq  Mozilla/5.0 (iPhone; CPU iPhone OS 8_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Mobile/12B411 QQ/5.4.0.454 NetType/WIFI Mem/125  
    手机百度

 Mozilla/5.0 (iPhone; CPU iPhone OS 8_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Mobile/12B411

 baiduboxapp/0_0.1.2.6_enohpi_4331_057/1.8_2C2%257enohPi/1099a/19E278C8930889E51D6B53FC4E21ED89FBC6FCBE4FCOHGRALPB/1

  
  iphone4s safari  Mozilla/5.0 (iPhone; CPU iPhone OS 7_1_1 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) Version/7.0 Mobile/11D201 Safari/9537.53  
android 华为荣耀 微信  Mozilla/5.0 (Linux; U; Android 4.2.2; zh-cn; H30-T00 Build/HuaweiH30-T00) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30 MicroMessenger/6.1.0.57_r1024329.540 NetType/WIFI  
  华为荣耀 手机qq  Mozilla/5.0 (Linux; U; Android 4.2.2; zh-cn; H30-T00 Build/HuaweiH30-T00) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30 V1_AND_SQ_5.4.0_218_YYB_D QQ/5.4.1.2395 NetType/WIFI  
  华为荣耀 uc  Mozilla/5.0 (Linux; U; Android 4.2.2; zh-CN; H30-T00 Build/HuaweiH30-T00) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 UCBrowser/10.1.0.527 U3/0.8.0 Mobile Safari/534.30  
  华为荣耀 原生  Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.34 Safari/534.24  
  MX3 uc  Mozilla/5.0 (Linux; U; Android 4.4.4; zh-CN; M351 Build/KTU84P) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 UCBrowser/9.9.2.467 U3/0.8.0 Mobile Safari/533.1  
  MX3 原生  Mozilla/5.0 (Linux; U; Android 4.4.4; zh-cn; M351 Build/KTU84P) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30
Jack.Wei
关注
go-webapp-startup:启动第一个Go Web应用程序的简单指南
03-30
转到WebApp 首先需要安装 创造 go |_ src |_ bin |_ pkg 默认情况下， $GOPATH设置为$HOME/go 。 您可以自定义$GOPATH ： export GOPATH=$HOME/<YOUR>/go 确认没问题 go env 在go/src创建新项目 在GoLand中打开新项目在“首选项”中启用Go模块集成...-> Go-> Go Modules 通过遵循为Go应用程序项目创建布局 让我们使用go mod init将项目目录设为模块的根目录： go mod init go-webapp 使用下面的Go命令安装软件包。 go get -u github.com/gin-gonic/gin 它在go模块中插入require ( ... ) ，并在go/pkg/mod插入软件包 通过以下命令创建包含外部依赖关系的供应商文件夹
webapp开发要点记录
weixin_33788244的博客
01-31 127
1. iphone 各机型 机型 分辨率 像素比 物理分辨率 高* 宽 * 后 主屏对角线长度 重量 像素密度（ppi） iphone4/iphone4s 320 * 480 2 640 * 960 4.5x2.31x0.37 in 115.2×58.6×9.3 mm 3.5 in 137/140g 329.65 ...
WebApp之Meta标签 （关闭自动识别数字为电话号码或邮箱之类）
03-11 275
iPhone上的Safari(还有些webkit android手机浏览器)会自动对看起来像是电话号码的数字串（包括已经加入连字符或括号格式化过的）添加电话链接，点击之后会询问用户是否想要拨打该号码。如果你不希望开启这个自动识别，可以将它关闭： <meta name="format-detection" content="telephone=no" /> 如果你关闭自动识...
App开发需要重点学习什么计算机技术
LLM064的专栏
04-23 1657
App 开发范畴过于庞大，包括各路客户端（Android、iOS、WP 等）、服务端（主流语言 Java、Php 等）。 肥肥对于 iOS 和服务端开发一窍不通，对于 Android 开发勉强算是略知一二，在各路大神面前班门弄斧一次。 Android 开发需要掌握的技能： Java 基础知识（就 Java 编程思想章节来说） Java 的注释操作符控制执行流程初始化与清
移动前端头部标签(HTML5 head meta)
weixin_33737134的博客
02-04 128
2019独角兽企业重金招聘Python工程师标准>>> ...
html viewport w3c,HTML WebApp Meta
weixin_33998152的博客
06-18 96
WebApp Meta 标签设置(iOS)A web application is designed to look and behave in a way similar to a native application—for example, it is scaled to fit the entire screen on iOS. You can tailor your web applic...
优化iPhone Safari Web开发：技巧与策略
"iPhone Safari Web开发经验" 在iPhone Safari Web开发中，有几点关键知识点需要开发者了解，以便构建针对这类移动设备优化的网站。 1. **User Agent (User Agent字符串)** iPhone和iPod touch的浏览器发送一个...
iPhone Web前端开发详解：CSS、JavaScript与 viewport 设定
"iPhone上的Web前端开发主要涵盖了四个方面的内容：了解iPhone Web App、CSS、JavaScript以及相关的资源和限制。本文将深入探讨这些主题，帮助开发者优化在iPhone平台上的Web应用体验。 一、了解iPhone Web App 在...
iPhone Web前端开发详解：CSS、JavaScript与资源优化
"iPhone上的Web前端开发" 在iPhone上进行Web前端开发是一项技术性强且需要考虑诸多因素的任务。本文档详细介绍了iOS设备上Web应用的开发要点，包括对iPhone Webapp的理解、CSS、JavaScript以及资源管理等方面。 一...
iPhone Web前端开发：CSS，JavaScript与Viewport策略
"这篇资料主要探讨了在iPhone上进行Web前端开发的相关知识，包括了解iPhone Web App、CSS、JavaScript以及Resource的管理。" 在iPhone上进行Web前端开发时，首要了解的是iPhone Web App的特点。iPhone的屏幕尺寸在...
html5 iphone 特殊meta属性学习
ISaiSai的专栏
01-07 1483
apple-touch-icon-precomposed 与apple-touch-icon 似乎没有区别，都是用来显示在safari 保存到桌面时候的图标 apple-mobile-web-app-capable：保存到桌面的页面是否不显示工具栏 ，yes ：不显示工具栏 no：默认值，显示工具栏 apple-mobile-web-app-status-bar-style：头部bar的样式，只有
无需公众号实现微信JSSDK分享卡片！Safari浏览器分享到微信自动成卡片！
TANKING，开源开发者！
11-17 917
要在微信分享卡片，需要接入微信自家的JSSDK，比较麻烦，还需要认证公众号，但是如果你没有这样的条件，那么你也可以试试使用iOS的Safari浏览器轻松实现，只需要在html中加入3个meta即可。
meta标签中apple-mobile-web-app-capable
liukai6的博客
08-01 2191
&lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt; 删除默认的苹果工具栏和菜单栏,将值设置为no。 需要显示工具栏和菜单栏时，不需要添加，默认值为yes，即显示。...
ios添加 启动画面_iOS中为网站添加图标到主屏幕以及增加启动画面
weixin_36308848的博客
02-01 526
虽然没有能力开发Native App，但还是可以利用iOS中Safari浏览器的特性小小的折腾一下，做一个伪Web App满足下小小的虚荣心的。既然是在iOS中的Safari折腾的，那么代码中利用到的也基本上都是Safari的私有属性。添加图标到主屏幕是Web App的第一步：添加图标到屏幕里的有两种属性值apple-touch-icon和apple-touch-icon-precomposed，...
ios全屏模式下避免跳转到safari浏览器，在苹果safari上实现全屏效果（让web页面以独立app的形式运行）
03-22 3619
添加meta标签，打开谷歌浏览器点击添加到主屏幕，重新启动，实现自动全屏（没有底部的地址栏了）。你可能不知道的一个功能：web 单页面应用可以在手机端以类似独立 app 的形式运行。有了这种功能，我们还需要给独立web页面添加一个在桌面上显示的图标。如果不放心，就再配合下面这个meta，将顶部状态栏变为白色。为透明，内容滚动的时候，透过状态栏可以看到下面的内容。重点是在safari中打开，然后点击中间的分享，找到。，应用以全屏模式运行，否则不会在全屏中运行。为不透明，看不到下面的内容。
Meta标签中的apple-mobile-web-app-capable属性及含义
weixin_30478923的博客
09-30 262
这meta的作用就是删除默认的苹果工具栏和菜单栏。 content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时，这个行meta就不用加了，默认就是显示。 转载于:https://www.cnblogs.com/shinehouse/articles/4001737.html...
好程序员web前端分享html中meta标签及用法详解
cique2620的博客
07-31 483
好程序员 web 前端分享 html 中 meta 标签及用法详解 ， 这篇文章给大家介绍了 html 中 ...
PWA配置
最新发布
程序勇的博客
07-25 531
PWA配置教程
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值