移动互联网终端

队名: 拾光组 组长博客链接 作业博客链接 团队项目情况 燃尽图(组内共享) 组长：宋奕 过去两天完成了哪些任务 维护后端代码 学习后端架构 GitHub签入记录 接下来的计划 维护后端代码，跟进组员完成进度，学习后端架构，学习深入python，解决匿名拨打电话问题，实现套牌多结果处理，准备beta版本的答辩 还剩下哪些任务 维护后端代码，跟进组员完成进度，学习后端架构，学习深入python，解决匿名拨打电话问题，实现套牌多结果处理，准备beta版本的答辩 燃尽图组内共享 遇到了哪些困难 数据安全性问题 有哪些收获和疑问 通过学习软工提高了自我修养 如何高效学习软工？ 组员1：杨晋南 过去两天完成了哪些任务 精进移动端Android界面的实现 完善了移动端Android部分界面间逻辑代码 github签入记录 接下来的计划 学习Android应用开发进阶，精进移动端Android界面的实现，拍照功能的完善，准备beta版本的答辩 还剩下哪些任务 学习Android应用开发进阶，精进移动端Android界面的实现，拍照功能的完善，准备beta版本的答辩 燃尽图组内共享 遇到了哪些困难 兼容性问题的研究遇到困难 有哪些收获和疑问 软工使人进步，软工使人快乐 学习了相关开发知识 如何高效学习软工？ 组员2：刘晓翔 过去两天完成了哪些任务 完善了移动端iOS部分界面间逻辑代码

/*--> */ /*--> */ H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解display:box的布局 理解flex布局 Flex布局兼容知识点总结 回到顶部 移动开发基本知识点 一. 使用rem作为单位 html { font-size: 100px; } @media(min-width: 320px) { html { font-size: 100px; } } @media(min-width: 360px) { html { font-size: 112.5px; } } @media(min-width: 400px) { html { font-size: 125px; } } @media(min-width: 640px) { html { font-size: 200px; } } 给手机设置100px的字体大小; 对于320px的手机匹配是100px， 其他手机都是等比例匹配; 因此设计稿上是多少像素的话，那么转换为rem的时候，rem = 设计稿的像素/100 即可; 二. 禁用a,button,input,optgroup,select,textarea 等标签背景变暗 在移动端使用a标签做按钮的时候或者文字连接的时候，点击按钮会出现一个 "暗色的"背景，比如如下代码： <a href=

性能测试 优化移动性能的第一步是进行性能测试。目前，业界存在大量免费和付费的资源可以完成这一步。不过，我最喜欢的还是谷歌 Chrome 内建的开发者工具和 WebPageTest 。为了简单起见，本文中我就直接选用 Chrome 的开发者工具了。 你不是一个开发者？没关系，这个开发者工具很容易就可以上手： 打开 Chrome （当然我已经假设你安装了 Chrome 浏览器） 点击右上角类似汉堡的三条线按钮，那是一个菜单键 选择 更多工具 ，最后选择 开发者工具 如果你对开发者工具不太熟悉，或者只了解一点。如果你想再深入的了解，可以阅读《 DevTools Learning 》。这篇文章收集了很多有关于开发者工具的学习资料。 现在你应该已经可以看到网格型的屏幕已经大量有趣的信息。其中最重要的，就是顶部的下拉菜单，其中包含了许多不同的手机和平板模拟模式。太酷了。 接下来，选择一个感兴趣的设备，比如 iPhone 6。在浏览器的地址栏输入站点地址，回车进入！你就可以看到站点被渲染到了 iPhone 6 模拟器上。滚动到页面底部可以看到一系列的性能信息，比如页面加载时间、页面大小和总的请求数。点击 Network 信息栏，可以看到瀑布流形式的页面加载动态，如下所示： 优化移动端图片 根据这份 HTTP 统计 ，图片大概占据了页面总体积的 60% 之多。只凭直觉来说，图片通知了网页

一、META/LINK相关： 　　1、百度禁止转码 　　通过百度手机打开网页时，百度可能会对你的网页进行转码，往你页面贴上它的广告，非常之恶心。不过我们可以通过这个meta标签来禁止它： 　　<meta http-equiv="Cache-Control" content="no-siteapp" /> 　　相关链接： SiteApp 转码声明 　　2、添加到主屏后的标题（IOS） 　　<meta name="apple-mobile-web-app-title" content="标题"> 　　3、启用 WebApp 全屏模式（IOS） 　　当网站添加到主屏幕后再点击进行启动时，可隐藏地址栏（从浏览器跳转或输入链接进入并没有此效果） 　　<meta name="apple-mobile-web-app-capable" content="yes" /> 　　<meta name="apple-touch-fullscreen" content="yes" /> 　　PS：然而，经本人用5S测试，设置"apple-touch-fullscreen"并没有什么卵用，希望了解者能在底部评论告知 　　4、设置状态栏的背景颜色（IOS） 　　设置状态栏的背景颜色，只有在 "apple-mobile-web-app-capable" content="yes" 时生效 　　<meta

meta基础知识 H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 忽略将页面中的数字识别为电话号码 <meta name="format-detection" content="telephone=no" /> 忽略Android平台中对邮箱地址的识别 <meta name="format-detection" content="email=no" /> 当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari <meta name="apple-mobile-web-app-capable" content="yes" /> <!-- ios7.0版本以后，safari上已看不到效果 --> 将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式 <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <!-- 可选default、black、black-translucent --> viewport模板

meta基础知识 H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 忽略将页面中的数字识别为电话号码 <meta name="format-detection" content="telephone=no" /> 忽略Android平台中对邮箱地址的识别 <meta name="format-detection" content="email=no" /> 当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari <meta name="apple-mobile-web-app-capable" content="yes" /> <!-- ios7.0版本以后，safari上已看不到效果 --> 将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式 <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <!-- 可选default、black、black-translucent --> viewport模板

meta基础知识 H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 忽略将页面中的数字识别为电话号码 <meta name="format-detection" content="telephone=no" /> 忽略Android平台中对邮箱地址的识别 <meta name="format-detection" content="email=no" /> 当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari <meta name="apple-mobile-web-app-capable" content="yes" /> <!-- ios7.0版本以后，safari上已看不到效果 --> 将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式 <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <!-- 可选default、black、black-translucent --> viewport模板

meta基础知识 H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 忽略将页面中的数字识别为电话号码 <meta name="format-detection" content="telephone=no" /> 忽略Android平台中对邮箱地址的识别 <meta name="format-detection" content="email=no" /> 当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari <meta name="apple-mobile-web-app-capable" content="yes" /> <!-- ios7.0版本以后，safari上已看不到效果 --> 将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式 <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <!-- 可选default、black、black-translucent --> viewport模板

meta基础知识 H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 忽略将页面中的数字识别为电话号码 <meta name="format-detection" content="telephone=no" /> 忽略 Android 平台中对邮箱地址的识别 <meta name="format-detection" content="email=no" /> 当网站添加到主屏幕快速启动方式，可隐藏地址栏， 仅针对ios的safari <meta name="apple-mobile-web-app-capable" content="yes" /><!-- ios7.0版本以后，safari上已看不到效果 --> 将网站添加到主屏幕快速启动方式， 仅针对ios的safari顶端状态条的样式 <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <!-- 可选default、black、black-translucent --> viewport模板

如今，移动互联网已经成为互联网组成的非常重要的一个分支，如果说以前对移动页面没有很规范的优化和高质量内容评判划分标准，但现在随着各大搜索引擎发布了移动建站指南，图文并茂的描述了如何提高移动站在百度质量度的等级， 移动端的SEO优化 也受到广大站长和SEO的青睐。 以目前欢欢测试的数据来看，关键词研究、网站架构和URL设计、页面关键词布局、文案写作、导航及内部链接系统设计等大部分PC版网站优化技术依然适用，没必要把移动页面优化当成一个和PC页面优化完全不一样的技术，说到底，为搜索用户提供高质量内容的目标是一样的，只不过需要考虑手机用户的特殊用户体验需求。 目前的移动搜索排名就是 PC搜索 排名加上移动因素进行一些调整，下面我就在欢欢博客上跟大家谈谈移动页面特殊的地方，这些要点在独立URL的移动站和自适应设计的移动站都适用。 1、非主体内容、功能大幅精简 PC版页面经常看到两三行顶部导航，这在手机上就没法看了，通常手机版本要大幅删减导航系统，包括顶部导航、面包屑和侧栏导航，即使保留完整主导航，也得折叠起来，用户点击时再打开，如果要显示顶部导航，最多5、6个就差不多了。 同样，广告、页脚、相关文章、Tag链接等PC页面上常见的内容，能删则删，手机上很难容得下这些内容，同时，删减这些内容页可以使页面HTML代码大幅减少，提高页面打开速度。 使用CSS可以隐藏导航等内容，但会产生冗余代码