1. 编程号首页

html5 移动端开发_h5网页设计与制作「建议收藏」

编程小号 • • 未分类

html5 移动端开发_h5网页设计与制作「建议收藏」1，iOS里固定中有输入或者textarea，用户在里面输入文字，触发键盘，固定容器会客显示，而不是是连续悬浮解决办法：http：//dwz.cn/CrwNz2，移动端点击时间300ms的延迟解决办法：zepto.j

1，iOS里固定中有输入或者textarea，用户在里面输入文字，触发键盘，固定容器会客显示，而不是是连续悬浮

      解决办法：http：  //dwz.cn/CrwNz

2，移动端点击时间300ms的延迟

      解决办法：zepto.js或者百度touch.js或者是fastclick.js

3，zepto的触摸问题：swipe事件在小米1等低端手机不支持基本不用zepto

4，百度的touch.js通过touch.on进行绑定事件，但是点击会遇到点透问题，也就是父级触发，子级触发

     解决办法：下载最新版触摸地址：http： //touch.code.baidu.com/通过最新API ev.originEvent.preventDefault（）;

之前有点透问题解决办法，用到touchend或者是touchstar，可以是可以，但是有没有考虑用户在有滑屏的时候刚好手指刚碰到这个按钮或者刚好在这个按钮手指离开，也就会触发这个按钮事件，所以这种方法不太合理，往往都是点击才触发的不是碰一下就让他触发。

5，选择下拉框的高问题，手机显示样式不一样，在QQ浏览器弹出的选项列表的高度跟选择一样高，在HTC手机自带的浏览器，高度设置较高的时候，不能用选项去选中需要的参数值，还有选择默认显示的第一个有底色

6，在iPod的方面，iPhone4不支持通过点击触发事件音频的JS，比如不能通过SRC的改变触发声音播放，用点击去解决。

7，移动端音频在苹果手机不支持音乐自动播放，苹果有安全机制，需要用户去手动触发才能播放音乐，也就是现在很多一屏一屏滑动项目要加个音乐图标不只是简单的让用户去关掉音乐，投机做法是用户手触发到屏幕的时候就执行ID.play（）;的JS

8，表单就不说了，比如上传按钮设背景图无效，都是通过不透明度为0来模拟的

9，很多人用到fullPage.js来实现大图滚动或者是一屏一屏的，但是在微信开发中用到这插件如果不设置锚来定义锚点，微信的公众号发布文章都带有链接参数有＃号，不加锚，就会出现滚到第二屏用户退出继续进去马上跳到第二页问题。

 解决办法：锚点：[‘page1’，’page2’，’page3’，’page4’]，

10，推荐使用swiper.js进行开发，比较好的中文API网站是：http：//www.swiper.com.cn/能解决很多移动端问题，

11，苹果系统在滚动长页面的时候总是滚的很不爽，不利索，回弹效果，加一句代码：-webkit-overflow-scrolling：touch;

12，视频默认控制器隐藏：视频:: – webkit-media-controls-enclosure {display：none！important;}，还有就是视频在移动端可以设置第一帧画面，但是有些手机比如HTC默认是灰色背景的，解决办法无非就是弄个图盖在上面，点击的时候图消失触发play，处女座才这么干。

13，PNG图压缩很头疼，效果不好，你可以试试这个网站：https：//tinypng.com/   很多人都知道jpg可以调质量，但是不知道png也能这么压缩，效果最好的一个网站。现在出现一种质量更低的webP格式图，谷歌开发的，安卓手机测试都可以，苹果手机不行。不采用，可以了解一下。可查看智图：http：  //zhitu.tencent.com/

14，能用字体图标就用字体图标，IE6都能兼容，移动端怕啥？  http：//www.iconfont.cn/   

15，CSS3动画效果可以参考下Animate.css写的很不错：http：//daneden.github.io/animate.css/ 

       有些低端手机比较炫的效果直接有前有后，没有中间效果，手机卡出翔，不支持。

16，了解viewport.js的人，如果遇到一些手机缩放小变大，jquery就要放到viewport引用前面，还有就是meta标签，需要注意width = device-width，github地址：https：// github的.com / anatoo / viewport.js   用PX来切图移动端，PC端怎么切你移动端也跟着切，但是一般少用，视口会出现些问题，项目比较急才用

17，移动端用REM吧，别再用老掉牙的EM了;

18，苹果手机都知道手机号码会消失不见，加句代码吧：<metacontent = “电话=无” 名称= “格式检测”/>

 

     忽略邮箱识别，加句代码吧：<meta content =“email = no”name =“format-detection”/>

19，好累，先睡觉改天再补充…..

 

 

以下移动端内容来自CSDN博友牙膏整理：“做手机网半年遇到  的问题及解决方法”

 

首先，先说的是我每个项目都会用到的一个模板页，这个我遇到大大小小的坑之后定义好的一个HTML文件

 

[html]  查看普通副本

 

 

  1. <！DOCTYPE html>  
  2. <HTML>  
  3. <HEAD>  
  4.     <meta charset =“utf-8”/>  
  5.     <！ – 宽度设置为设备实际宽度，初始化倍数为1，最小倍数为1，最大倍数为1，用户缩放为否 – >  
  6.     <meta name =“viewport”content =“width = device-width，inital-scale = 1.0，minimum-scale = 1.0，maximum-scake = 1.0，user-scalable = no”/>  
  7.     <！ – 删除默认的苹果工具栏和菜单栏 – >  
  8.     <meta name =“apple-mobile-web-app-capable”content =“yes”/>  
  9.     <！ – 苹果手机顶部为黑色 – >  
  10.     <meta name =“apple-mobile-web-status-bar-style”content =“block”/>  
  11.     <！ – 屏蔽浏览器自动识别数字为电话号码 – >  
  12.     <meta name =“fromat-detecition”content =“telephone = no”/>  
  13.     <！ – base.css是所有项目都会用到的底层样式 – >  
  14.     <link rel =“stylesheet”type =“text / css”href =“css / base.css”/>  
  15.     <！ – content.css是每个项目所有页面都会用到的公共样式 – >  
  16.     <link rel =“stylesheet”type =“text / css”href =“css / content.css”/>  
  17.     <！ – main.css为每个页面或是模块用到的一个样式文件 – >  
  18.     <link rel =“stylesheet”type =“text / css”href =“css / main.css”/>  
  19.     <TITLE> </ TITLE>  
  20.     <script type =“text / javascript”src =“lib / jquery-1.8.2.min.js”> </ script>  
  21.     <！ – base.js为所有项目都会用到的js文件 – >  
  22.     <script type =“text / javascript”src =“lib / base.js”> </ script>  
  23. </ HEAD>  
  24. <BODY>  
  25. </ BODY>  
  26. </ HTML>  

 

上面的元可以帮我避免了好都问题

遇到的问题：

1.苹果手机上面，输入控件会有默认的样式

解决

 

[html]  查看普通副本

 

 

  1. / *去掉苹果手机端的Web按钮默认样式，解决按钮默认圆角问题* /  
  2. 输入[类型= “按钮”] { – WebKit的外观：无; / *去除输入默认样式* // * border-radius：0px; * /}  

2.在点击一个标签的时候，安卓的手机会有蓝色底，苹果的机子会有灰色底

 

解决

 

[html]  查看普通副本

 

 

  1. / *屏蔽点击元素出现底色* /  
  2. 一个  
  3. {  
  4.     -webkit抽头高亮颜色：RGBA（255,255,255,0）;  
  5. }  

3.禁止页面上的文字选中功能

 

解决

 

[html]  查看普通副本

 

 

  1. -webkit-用户选择：无;  

4.左图，右文字的结构实现

 

html5 移动端开发_h5网页设计与制作「建议收藏」

这种结构  

（1）。第一次做的时候，左右两块都是用百分百，这样在不同的屏幕因为右边字体的原因会有布局混乱的情况，然后就用媒体查询写多了两个样式文件，不过还有一个就是在平板上面，同样的百分百，左边的图片太大，导致右边的文字之间的间距要很大才可以对齐，效果很不好

（2）。第二次做的时候，就想到了一个方法，利用浮动脱离文档流的特性，给图片设置一个maxwidth，然在装置宽度*图片百分百= maxwidth时，将文字所在的格的浮子设置为无;且设置利润率左为图片的宽度+之间的间距。

（3）。第三次做的时候，因为看了其他的一些轻APP在横屏的时候，图片大小依然一致，所以把图片宽度定死，给个最大宽度和最小宽度，用弹性布局柔性盒，这回就很简单的高度这个布局问题

5.在微信，UC打开页面会有缓存问题，导致有时候改动的小效果看不到

解决：这里试过用高速缓存来不让其缓存，不过用完之后反而令他们不加载文件（至今还没成功使用过高速缓冲存储器），最后在加载发送请求的时候文件后面添加多个随机数，这样才解决测试是缓存问题

6.在做手机页面的时候，很多时候会用到的z-index这个属性，如果用到这个属性的时候再对对应元素设置的话，会比较容易乱。

解决：我设置了

 TOP0 {z索引：9999};

TOP1 {z索引：8888};

TOP2 {z索引：7777};

TOP3 {z索引：6666};

TOP4 {z索引：5555};

这样，在每个页面中，对应得贴上上面样式就行了。

7.还有就是多列布局列，弹性布局柔性盒

在不知道这两种布局的时候，以下布局对来来说是比较麻烦的，特别是三列的，并且中间那个还有左右边框，定义百分百的时候比较麻烦。

在知道多列布局栏，弹性布局flex-box后上面的问题很好解决，但是要记得列的子元素要给高度，不然有可能会布局混乱

还有个问题就是设置列数为3的时候，在7个子元素的时候会是这样的

竖着排列，不符合正常的一个阅读习惯，最后还是改成了浮动来布局

8.em跟REM的区别

EM是相对于父层

REM是相对于根元素

所以说，如果HTML {字体大小：62.5％};的时候，

如果是在父元素设置1.5em，孩子设置1.0em就等同于HTML的1.5em了

在父元素设置1.5em的情况下，孩子用REM作为字体大小的单位的话，那么就要设置1.5rem才等同上面的效果

9.backgrond大小，这个属性很好用

用法有a。百分百b。直接给宽高c.cover d.contain四种用法，按需要选择使用

10.在iphone中，在手机改为横屏模式的时候，字体会默认变大

解决：

/ *禁止IOS横屏的时候字体变大* /
-webkit-text-size-adjust：none;

11.在用到<div> <img src =“”/> </ div>这个结构的时候，就是用块级元素包住img的时候，会出现div高度大于img的情况，就是有点高度不知道如何来解决：img {display：block;};

12.在用到媒体的时候，如果在<meta>有设置width = device-widht的话，媒体中在设置max-width min-width，这里不能用max-device-width跟min-device-height，不然会没效果

13.目前手机网络还无法禁用手机横屏的情况下，如果你页面布局有问题的话，在横屏的时候会出现布局乱的情况

解决

在横屏的时候弹出个层把他改正

例如

 

[html]  查看普通副本

 

 

  1. / * @媒体画面和（方向：风景）  
  2. {  
  3.     .orientation电话  
  4.     {  
  5.         显示：块;  
  6.     }  
  7. } * /  
  8. / *页面遮盖层* /  

14.在弹出整屏的div的时候，如果页面整体大于一屏幕，这时候还会出现页面可以滚动的情况页面旁边是出现滚动条的，而且是可以拖动的

解决：在体设置高度为100％，且溢出隐藏;在弹出消失的时候才去掉溢出隐藏;

15.在做一个手机网络项目的时候，要先总结下页面所以的字体大小，然后定义好几种常用字体大小，防止后期混乱

16.在看设计稿的时候，要注意比例的缩放，因为UI做的时候用的尺寸是用640×1136（至少我这边是这样），然后再做手机网络的时候，我们再伴侣那里内容设置宽度=设备宽度，所以要根据实际的页面效果来定义页面常用的字体大小大小以及其他。不能按UI给出的字体大小来设置字体大小。

17.在类反面，少用继承，多用组合，这样可以加快开发效率，可以自己定义一个底层样式base.css（常用样式且所以项目都可以共用）

18.可能做手机web的都去学校手机web开发框架，例如我就是学了jquery mobile，这个框架很强大，但是不的不说，就是在UI样式方面比较麻烦，要不断的去覆盖样式，如果你的网是UI是有自己特色的话，这个时候用jquery mobile就比较费时间（至少我是这样）。所以说在开发的时候，觉得哪个方法快就用哪个，不要为了用框架而且用框架。

************************************************** **********分割线************************************** **********************************************

以下规范建议，的英文：均Alloyteam在日常开发过程中总结提炼出的经验，规范具备较好的项目实践，强烈推荐使用

字体设置

使用无衬线字体

body {
    font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
}

iOS 4.0+使用英文字体Helvetica Neue，之前的iOS版本降级使用Helvetica。中文字体设置为华文黑体STHeiTi。需补充说明，华文黑体并不存在iOS的字体库中（http://support.apple.com/ kb / HT5878），但系统会自动将华文黑体STHeiTi兼容命中系统默认中文字体黑体 – 简或黑体 – 繁

Heiti SC Light 黑体-简 细体 （iOS 7后废弃）
Heiti SC Medium 黑体-简 中黑
Heiti TC Light 黑体-繁 细体
Heiti TC Medium 黑体-繁 中黑

原生Android的下中文字体与英文字体都选择默认的无衬线字体

4.0 之前版本英文字体原生 Android 使用的是 Droid Sans，中文字体原生 Android 会命中 Droid Sans Fallback
4.0 之后中英文字体都会使用原生 Android 新的 Roboto 字体
其他第三方 Android 系统也一致选择默认的无衬线字体

基础交互

设置全局的CSS样式，避免图中的长按弹出菜单与选中文本的行为

a, img {
    -webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */
}
html, body {
    -webkit-user-select: none;   /* 禁止选中文本（如无文本选中需求，此为必选项） */
    user-select: none;
}

html5 移动端开发_h5网页设计与制作「建议收藏」

移动性能

要考虑Android低端机与2G网络场景下性能注意！

发布前必要检查项

  • 所有图片必须有进行过压缩
  • 考虑适度的有损压缩，如转化为80％质量的JPG图片
  • 考虑把大图切成多张小图，常见在横幅图过大的场景

加载性能优化，达到打开足够快

  • 数据离线化，考虑将数据缓存在localStorage
  • 请求初始数资源  < 4 注意！
  • 图片使用CSS Sprites或DataURI
  • 外链CSS中避免@import引入
  • 考虑内嵌小型的静态资源内容
  • 初始请求资源的gzip后总体积 < 50kb
  • 静态资源（HTML / CSS / JS /图片）是否优化压缩？
  • 避免打包大型类库
  • 确保接入层已开启Gzip压缩（考虑提升Gzip级别，使用CPU开销换取加载时间）注意！
  • 尽量使用CSS3代替图片
  • 初始首屏之外的静态资源（JS / CSS）延迟加载注意！
  • 初始首屏之外的图片资源按需加载（判断可视区域）注意！
  • 单页面应用（SPA）考虑延迟加载非首屏业务模块
  • 开启保持活动链路复用

运行性能优化，达到操作足够流畅

  • 避免iOS 300 + ms点击延时问题注意！
  • 缓存DOM选择与计算
  • 避免触发页面重绘的操作
  • Debounce连续触发的事件（scroll / resize / touchmove等），避免高频繁触发执行注意！
  • 尽可能使用事件代理，避免批量绑定事件
  • 使用CSS3动画代替JS动画
  • 避免在低端机上使用大量CSS3渐变阴影效果，可考虑降级效果来提升流畅度
  • HTML结构层级保持足够简单
  • 尽能少的使用CSS高级选择器与通配选择器
  • 把事情简单化

今天的文章html5 移动端开发_h5网页设计与制作「建议收藏」分享到此就结束了，感谢您的阅读。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/77361.html

赞 (0)
编程小号编程小号
0

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注