记得收藏【国际动画教程网】,赶快注册吧!
注册

合作站点账号登陆

QQ登录

只需一步,快速开始

扫一扫,访问微社区

快捷导航
查看: 52175|回复: 0
收起左侧

[HTML5/CSS3] 移动端HTML5页面开发备忘录[含1P]

[复制链接]
发表于 2017-8-27 22:57:20 | 显示全部楼层 |阅读模式
<article>
                                        <html>
<head></head>
<body>
  <p style="text-align:center"></p>
  <p>把平时开发工作中遇到的一些问题写下来,权当备忘录。</p>
  <h2><strong>有关Meta</strong></h2>
  <h2><strong>基本Meta</strong></h2>
  <pre>
<code class="language-javascript">&lt;!-- 设置缩放 --&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" /&gt;
&lt;!-- 可隐藏地址栏,仅针对IOS的Safari(注:IOS7.0版本以后,safari上已看不到效果) --&gt;
&lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt;
&lt;!-- 仅针对IOS的Safari顶端状态条的样式(可选default/black/black-translucent ) --&gt;
&lt;meta name="apple-mobile-web-app-status-bar-style" content="black" /&gt;
&lt;!-- IOS中禁用将数字识别为电话号码/忽略Android平台中对邮箱地址的识别 --&gt;
&lt;meta name="format-detection" content="telephone=no, email=no" /&gt;
</code></pre>
  <h2><strong>搜索引擎Meta</strong></h2>
  <pre>
<code class="language-javascript">&lt;!-- 搜索引擎索引方式:通常有如下几种取值:none,noindex,nofollow,all,index和follow。--&gt;
&lt;meta name="robots" content="index,follow" /&gt;
&lt;!--
    all:文件将被检索,且页面上的链接可以被查询;
    none:文件将不被检索,且页面上的链接不可以被查询;
    index:文件将被检索;
    follow:页面上的链接可以被查询;
    noindex:文件将不被检索;
    nofollow:页面上的链接不可以被查询。
--&gt;
</code></pre>
  <h2><strong>页面缓存设置Meta</strong></h2>
  <pre>
<code class="language-javascript">&lt;!-- 清除缓存 --&gt;
&lt;meta http-equiv="pragma" content="no-cache"&gt;
&lt;meta http-equiv="cache-control" content="no-cache"&gt;
&lt;meta http-equiv="expires" content="0"&gt;
</code></pre>
  <h2><strong>常见问题</strong></h2>
  <h2><strong>移动端字体设置</strong></h2>
  <pre>
<code class="language-javascript">/*中英字体名对照表
宋体      SimSun
黑体      SimHei
微信雅黑   Microsoft Yahei
微软正黑体 Microsoft JhengHei
新宋体    NSimSun
新细明体  MingLiU
细明体    MingLiU
标楷体    DFKai-SB
仿宋     FangSong
楷体     KaiTi
仿宋_GB2312  FangSong_GB2312
楷体_GB2312  KaiTi_GB2312  
说明:中文字体多数使用宋雅黑,英文用Helvetica
*/
body { font-family: Microsoft Yahei,SimSun,Helvetica; }
</code></pre>
  <h2><strong>打电话发短信写邮件</strong></h2>
  <pre>
<code class="language-javascript">// 打电话
&lt;a href="http://www.open-open.com/lib/view/tel:010-88888"&gt;打电话给:010-88888&lt;/a&gt;

//  发短信
&lt;a href="sms:88888"&gt;发短信给: 88888&lt;/a&gt;

// 写邮件
//注:在添加这些功能时,第一个功能以"?"开头,后面的以"&amp;"开头
//1.普通邮件
&lt;a href="mailto:haha@wtf.com"&gt;快来点我啊,给你发种子。&lt;/a&gt;
//2.收件地址后添加?cc=开头,可添加抄送地址(Android存在兼容问题)
&lt;a href="mailto:haha@wtf.com?cc=666@wtf.com"&gt;快来点我啊,给你发种子。&lt;/a&gt;
//3.跟着抄送地址后,写上&amp;bcc=,可添加密件抄送地址(Android存在兼容问题)
&lt;a href="mailto:haha@wtf.com?cc=666@wtf.com&amp;bcc=384900096@wtf.com"&gt;快来点我啊,给你发种子。&lt;/a&gt;
//4.包含多个收件人、抄送、密件抄送人,用分号(;)隔开多个邮件人的地址
&lt;a href="mailto:haha@wtf.com;384900096@wtf.com"&gt;快来点我啊,给你发种子。&lt;/a&gt;
//5.包含主题,用?subject=
&lt;a href="mailto:haha@wtf.com?subject=邮件主题"&gt;快来点我啊,给你发种子。&lt;/a&gt;
//6.包含内容,用?body=;如内容包含文本,使用%0A给文本换行
&lt;a href="mailto:haha@wtf.com?body=邮件主题内容%0A我是第二行内容%0A你没有猜错,这是我是第三行。"&gt;快来点我啊,给你发种子。&lt;/a&gt;
//7.内容包含链接,含http(s)://等的文本自动转化为链接
&lt;a href="mailto:haha@wtf.com?body=http://www.wtf.com"&gt;快来点我啊,给你发种子。&lt;/a&gt;
//8.内容包含图片(PC不支持)
&lt;a href="mailto:haha@wtf.com?body=&lt;img src='images/torrent.jpg' /&gt;"&gt;快来点我啊,给你发种子。&lt;/a&gt;
//9.完整示例
&lt;a href="mailto:haha@wtf.com;384900096@wtf.com?cc=666@wtf.com&amp;bcc=993233461@wtf.com&amp;subject=[邮件主题]&amp;body=我是第一行内容%0A%0Ahttp://www.baidu.com%0A%0A&lt;img src='images/1.jpg' /&gt;"&gt;快来点我啊,给你发种子。&lt;/a&gt;
</code></pre>
  <h2><strong>touch事件</strong></h2>
  <p>事件响应顺序: ontouchstart &gt; ontouchmove &gt; ontouchend &gt; onclick</p>
  <ul>
   <li>touchstart ——当手指触碰屏幕时候发生</li>
   <li>touchmove ——当手指在屏幕上滑动时连续触发。</li>
   <li>通常在滑屏页面,会调用 event 的 preventDefault() 可以阻止默认情况的发生:阻止页面滚动</li>
   <li>touchend ——当手指离开屏幕时触发</li>
   <li>touchcancel ——系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面 alert() ,此时会触发该事件,这个事件比较少用。</li>
  </ul>
  <p>TouchEvent说明:</p>
  <ul>
   <li>touches:屏幕上所有手指的信息</li>
   <li>targetTouches:手指在目标区域的手指信息</li>
   <li>changedTouches:最近一次触发该事件的手指信息</li>
   <li>touchend时,touches与targetTouches信息会被删除,changedTouches保存的最后一次的信息,用于计算手指信息</li>
  </ul>
  <p>参数信息(changedTouches[0])</p>
  <ul>
   <li>clientX、clientY在显示区的坐标</li>
   <li>target:当前元素</li>
  </ul>
  <h2><strong>科普:移动端click事件200-300ms的延时响应</strong></h2>
  <p>以下是历史原因:</p>
  <p>2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上,使用了双击缩放(double tap to zoom)的方案,比如你在手机上用浏览器打开一个PC上的网页,你可能在看到页面内容虽然可以撑满整个屏幕,但是字体、图片都很小看不清,此时可以快速双击屏幕上的某一部分,你就能看清该部分放大后的内容,再次双击后能回到原始状态。</p>
  <p>双击缩放是指用手指在屏幕上快速点击两次,iOS 自带的 Safari 浏览器会将网页缩放至原始比例。</p>
  <p>原因就出在浏览器需要如何判断快速点击上,当用户在屏幕上单击某一个元素时候,例如跳转链接 &lt;a href="#"&gt;&lt;/a&gt; ,此处浏览器会先捕获该次单击,但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作,所以,捕获第一次单击后,浏览器会先Hold一段时间t,如果在t时间区间里用户未进行下一次点击,则浏览器会做单击跳转链接的处理,如果t时间里用户进行了第二次单击操作,则浏览器会禁止跳转,转而进行对该部分区域页面的缩放操作。那么这个时间区间t有多少呢?在IOS safari下,大概为300毫秒。这就是延迟的由来。</p>
  <p>造成的后果用户纯粹单击页面,页面需要过一段时间才响应,给用户慢体验感觉,对于web开发者来说是,页面js捕获click事件的回调函数处理,需要300ms后才生效,也就间接导致影响其他业务逻辑的处理。</p>
  <p>解决方案:</p>
  <ul>
   <li>fastclick</li>
   <li>zepto的 touch模块</li>
  </ul>
  <h2><strong>点击元素产生背景或边框问题</strong></h2>
  <pre>
<code class="language-javascript">a,button,input,textarea {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-user-modify:read-write-plaintext-only; //-webkit-user-modify有个副作用,就是输入法不再能够输入多个字符
}   
/*也可以...,简单粗暴*/
* { -webkit-tap-highlight-color: rgba(0,0,0,0); }
</code></pre>
  <h2><strong>字体单位font-size选择px还是rem</strong></h2>
  <pre>
<code class="language-javascript"> /*如需适配多种移动设备,建议使用rem。以下为参考值:*/
html { font-size: 62.5%; }   /*10÷16 = 62.5%*/
/*设置12px字体。
注:在rem前要加上对应的px值,解决不支持rem的浏览器的兼容问题,做到优雅降级*/
body { font-size:12px; font-size:1.2rem; }
</code></pre>
  <h2><strong>其它一些实用CSS技巧</strong></h2>
  <pre>
<code class="language-javascript">/*禁止长按链接与图片弹出菜单*/
a,img { -webkit-touch-callout: none }   
/*禁止ios和android用户选中文字*/
html,body {-webkit-user-select:none; user-select: none; }
/*改变输入框placeholder的颜色值*/
::-webkit-input-placeholder { /* WebKit browsers */
color: #999; }
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #999; }
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #999; }
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #999; }
input:focus::-webkit-input-placeholder{ color:#999; }

/*android上去掉语音输入按钮*/
input::-webkit-input-speech-button {display: none}
</code></pre>
  <h2><strong>禁用input在ios下,输入英文首字母的默认大写</strong></h2>
  <pre>
<code class="language-javascript">&lt;input autocapitalize="off" autocorrect="off" /&gt;
</code></pre>
  <h2><strong>屏幕旋转的事件和样式</strong></h2>
  <p>JS处理:</p>
  <pre>
<code class="language-javascript">function orientInit(){
    var orientChk = document.documentElement.clientWidth &gt; document.documentElement.clientHeight?'landscape':'portrait';
    if(orientChk =='lapdscape'){
        //横屏下需要执行代码
    }else{
        //竖屏下需要执行代码
    }
}

orientInit();
window.addEventListener('onorientationchange' in window?'orientationchange':'resize', function(){
    setTimeout(orientInit, 100);
},false)
</code></pre>
  <p>CSS处理:</p>
  <pre>
<code class="language-javascript">/*竖屏时样式*/
@media all and (orientation:portrait){   }
/*横屏时样式*/
@media all and (orientation:landscape){   }
</code></pre>
  <h2><strong>播放视频不全屏</strong></h2>
  <pre>
<code class="language-javascript">&lt;!--
1.ios7+支持自动播放
2.支持Airplay的设备(如:音箱、Apple TV)播放
x-webkit-airplay="true"
3.播放视频不全屏
webkit-playsinline="true"
--&gt;
&lt;video x-webkit-airplay="true" webkit-playsinline="true" preload="auto" autoplay src="http://"&gt;&lt;/video&gt;
</code></pre>
  <h2><strong>消除transition闪屏</strong></h2>
  <pre>
<code class="language-javascript">.css {
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}
</code></pre>
  <p>&nbsp;</p>
  <p>来自:http://zerosoul.github.io/2016/11/15/h5-memo/</p>
  <p>&nbsp;</p>
</body>
</html><h2><strong>扩展阅读</strong></h2><a title=HTML5与移动端web学习笔记 href="/lib/view/open1433509479119.html"><span class=title>HTML5与移动端web学习笔记</span></a><br><a title=移动WEB资源整合 href="/lib/view/open1460446039388.html"><span class=title>移动WEB资源整合</span></a><br><a title=优化移动体验的HTML5技巧 href="/lib/view/open1370664140992.html"><span class=title>优化移动体验的HTML5技巧</span></a><br><a title=以开发者的视角整理编排的前端开发所使用语言的主流学习资源 href="/lib/view/open1456802317250.html"><span class=title>以开发者的视角整理编排的前端开发所使用语言的主流学习资源</span></a><br><a title=H5移动端知识点总结 href="/lib/view/open1454548816823.html"><span class=title>H5移动端知识点总结</span></a><br><h2><strong>为您推荐</strong></h2><a title=AngularJS ╟ 如何处理 xss 漏洞 href="/lib/view/open1417482185445.html"><span class=title>AngularJS – 如何处理 XSS 漏洞</span></a><br><a title=SpringMVC 清晰简单教程 href="/lib/view/open1415373235887.html"><span class=title>SpringMVC 清晰简单教程</span></a><br><a title=jsoup 解析html信息 href="/lib/view/open1455717177855.html"><span class=title>jsoup 解析HTML信息</span></a><br><a title=HTML5 css3专题 纯css打造相册效果 href="/lib/view/open1452954905855.html"><span class=title>HTML5 CSS3专题 纯CSS打造相册效果</span></a><br><a title=Markdown 语法简介和使用说明-详细版 href="/lib/view/open1456126393011.html"><span class=title>Markdown 语法简介和使用说明-详细版</span></a><br><h2><strong>更多</strong></h2><a title=HTML5 href="https://www.baidu.com/s?wd=site:open-open.com HTML5"><span class=title>HTML5</span></a><br><a title=WebKit href="https://www.baidu.com/s?wd=site:open-open.com WebKit"><span class=title>WebKit</span></a><br>
                                </article>




上一篇:10分钟读懂html5 多了啥?
一起共享资源,共建精品资源平台。记得一定要收藏我们网站。www.gjdhjc.com ||||| 还有我们的网址导航:www.58q8.com【链接失效可以留言看到第一时间补帖,如果懒的回复我也是没办法了】

QQ|QQ群:133515734|站长博客|百度网盘|许进龙|手机触屏版|国际动画教程网 ( ICP13037175 )