webapp开发要点记录

最新推荐文章于 2023-03-22 11:10:35 发布
最新推荐文章于 2023-03-22 11:10:35 发布
阅读量690 收藏
点赞数

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  
       
hsany330
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webkit webApp 开发技术要点总结
05-30
webkit webApp 开发技术要点总结.欢迎下载学习
6个html5页面适配iphone6的技巧
weixin_30664615的博客
10-13 167
iphone6及iphone6plus已经出来一段时间了。很多移动端网站，以前写死body为320px的，现在估计也忙着做适配了。 大屏幕手机其实一直有，只是以前大家没怎么重视，移动端的H5页面大部分都以320px为基准宽度进行布局，那些大屏屌丝android用户也懒得去理，而现在iphone也搞起多屏幕，老板们重视程度就不一样了。 回归正题，兼容iphone各版本机型最佳的方式就是自适应。 ...
meta标签中apple-mobile-web-app-capable
liukai6的博客
08-01 2013
&lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt; 删除默认的苹果工具栏和菜单栏,将值设置为no。 需要显示工具栏和菜单栏时，不需要添加，默认值为yes，即显示。...
ios添加 启动画面_iOS中为网站添加图标到主屏幕以及增加启动画面
weixin_36308848的博客
02-01 491
虽然没有能力开发Native App，但还是可以利用iOS中Safari浏览器的特性小小的折腾一下，做一个伪Web App满足下小小的虚荣心的。既然是在iOS中的Safari折腾的，那么代码中利用到的也基本上都是Safari的私有属性。添加图标到主屏幕是Web App的第一步：添加图标到屏幕里的有两种属性值apple-touch-icon和apple-touch-icon-precomposed，...
关于Web页面中的meta
tanqth的专栏
12-24 1万+
META标签是HTML语言HEAD区的一个辅助性标签，它位于HTML文档头部的< HEAD>标记和< TITLE>标记之间，它提供用户不可见的信息。虽然不可见，却也非常有用。 标签格式如下： < meta name=“keywords” content=“XXXX”/> 对应name说明： 　　1、Keywords (关键字) 　　　说明：为搜索引擎提供的关键字列表 　　　用法：< Meta name=“Keywords” Content=“关键词1,关键词2，关键
移动端webapp开发必备知识
03-01
本文主要介绍webapp的开发与调试的相关知识和经验，以及给出几种可选的解决方案。CSSpixels：浏览器使用的抽象单位，主要用来在网页上绘制内容。devicepixels：显示屏幕的的最小物理单位，每个dp包含自己的颜色、...
WebApp开发要点
09-12
WebApp开发要点 ,Webapp开发的特点等
教育移动WebApp开发实践.ppt
11-21
教育移动WebApp开发实践.ppt
如何让 web 页面以独立 app 的形式运行 meta: apple-mobile-web-app-capable
05-15 5994
如何让 web 页面以独立 app 的形式运行 meta: apple-mobile-web-app-capable 看个例子 你可能不知道的一个功能： web 单页面应用可以在手机端以类似独立 app 的形式运行。 就像下面这样， 没有上下的工具栏 切换的时候跟普通 app 没什么两样 让页面实现 standalone 功能 苹果官方对 safari 可用 meta 标签的说明 Safari HTML Reference - Supported Meta Tags 只需要添加下面一行即可 &lt
apple-touch-startup-image 制作iphone web应用程序的启动画面
weixin_30836759的博客
11-16 221
为ipad制作web应用程序的启动画面时发现个问题，只能显示竖屏图，横屏图出不来，如下： 首先页面头部里要加入（这个是APP启动画面图片，如果不设置，启动画面就是白屏，图片像素就是手机全屏的像素） <link rel="apple-touch-startup-image" media="screen and (orientation: portrait)" href="/apple_...
ios全屏模式下避免跳转到safari浏览器，在苹果safari上实现全屏效果（让web页面以独立app的形式运行）
03-22 2758
添加meta标签，打开谷歌浏览器点击添加到主屏幕，重新启动，实现自动全屏（没有底部的地址栏了）。你可能不知道的一个功能：web 单页面应用可以在手机端以类似独立 app 的形式运行。有了这种功能，我们还需要给独立web页面添加一个在桌面上显示的图标。如果不放心，就再配合下面这个meta，将顶部状态栏变为白色。为透明，内容滚动的时候，透过状态栏可以看到下面的内容。重点是在safari中打开，然后点击中间的分享，找到。，应用以全屏模式运行，否则不会在全屏中运行。为不透明，看不到下面的内容。
meat标签
奔跑的五花肉灬
11-05 389
<!DOCTYPE html> <!-- 使用 HTML5 doctype，不区分大小写 --> <html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa --> <head> <!-- 声明文档使用的字符编码 --> &...
iPad apple-touch-startup-image实现portrait和landscape
weixin_33862188的博客
05-20 167
iPad apple-touch-startup-image实现portrait和landscape 为ipad制作web应用程序的启动画面时发现个问题，只能显示竖屏图，横屏图出不来，网上的朋友都说无法解决，做了无数次尝试，终于成功，如下： 首先页面头部里要加入 <link rel=”apple-touch-startup-image” media=”screen and (...
苹果手机的meta设置
しΙしΙ 的专栏
11-27 4339
："添加到主屏幕“后，全屏显示 ： 这meta的作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时，这个行meta就不用加了，默认就是显示。 ”apple-mobile-web-app-status-bar-style” content=black” />  默认值为default（白色），可以定为black（黑
apple-mobile-web-app-capable作用
weixin_34148340的博客
03-01 467
apple-mobile-web-app-capable是设置Web应用是否以全屏模式运行。 语法结构: 1 <meta name="apple-mobile-web-app-capable" content="yes"> 说明: 如果content设置为yes，Web应用会以全屏模式运行，反之，则不会。...
apple-touch-startup-image开机画面
demographic2017的博客
01-21 519
代码： <link rel="apple-touch-startup-image" href="milanoo_startup.png" /> 横屏和竖屏： <link rel="apple-touch-startup-image" media="screen and (orientation: portrait)" href="milanoo_startup....
apple-mobile-web-app-capable
03-08 1148
<meta content="yes" name="apple-mobile-web-app-capable"> 删除默认的苹果工具栏和菜单栏。 需要显示工具栏和菜单栏时，不需要添加，默认值为no，即正常显示。如果content设置为yes，Web应用会以全屏模式运行，可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。 ...
Meta标签中的apple-mobile-web-app-capable属性及含义
热门推荐
逸尘的专栏
09-15 6万+
这meta的作用就是删除默认的苹果工具栏和菜单栏。 content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时，这个行meta就不用加了，默认就是显示。
开发一个webapp代码示例
最新发布
03-28
这里提供一个简单的WebApp代码示例，使用HTML、CSS和JavaScript编写。该WebApp是一个简单的待办事项列表，用户可以添加、删除和标记已完成的任务。 HTML代码： ``` <!DOCTYPE html> <html> <head> <title>Todo List</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="wrapper"> <h1>Todo List</h1> <input type="text" id="new-task" placeholder="Add new task"> <button id="add-task">Add</button> <ul id="task-list"></ul> </div> <script src="app.js"></script> </body> </html> ``` CSS代码： ``` body { font-family: Arial, sans-serif; } .wrapper { max-width: 500px; margin: 0 auto; padding: 20px; background-color: #f2f2f2; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.2); } h1 { text-align: center; } input[type="text"] { padding: 10px; width: 70%; border-radius: 5px; border: none; box-shadow: 0 0 5px rgba(0,0,0,0.1) inset; } button { padding: 10px; background-color: #007bff; color: #fff; border: none; border-radius: 5px; cursor: pointer; } button:hover { background-color: #0062cc; } ul { list-style: none; padding: 0; margin: 0; } li { padding: 10px; margin: 5px 0; background-color: #fff; border-radius: 5px; box-shadow: 0 0 5px rgba(0,0,0,0.1); display: flex; justify-content: space-between; align-items: center; } li.completed { background-color: #d7ffd7; } li.completed .task-text { text-decoration: line-through; color: #999; } ``` JavaScript代码： ``` const newTaskInput = document.getElementById('new-task'); const addTaskButton = document.getElementById('add-task'); const taskList = document.getElementById('task-list'); function addTask() { if (newTaskInput.value.trim() === '') { return; } const taskText = newTaskInput.value.trim(); const taskItem = document.createElement('li'); const taskTextElement = document.createElement('span'); const deleteButton = document.createElement('button'); const completeButton = document.createElement('button'); taskTextElement.textContent = taskText; deleteButton.textContent = 'Delete'; completeButton.textContent = 'Complete'; deleteButton.addEventListener('click', deleteTask); completeButton.addEventListener('click', completeTask); taskItem.appendChild(taskTextElement); taskItem.appendChild(deleteButton); taskItem.appendChild(completeButton); taskList.appendChild(taskItem); newTaskInput.value = ''; } function deleteTask(event) { event.target.parentNode.remove(); } function completeTask(event) { event.target.parentNode.classList.toggle('completed'); } addTaskButton.addEventListener('click', addTask); ``` 以上代码实现了一个简单的WebApp，可以自由添加、删除和标记任务。当用户点击“完成”按钮时，任务将被标记为已完成，并在列表项上应用“completed”类。当用户点击“删除”按钮时，任务将被删除。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值