【生意多】-免费发布分类信息
当前位置: 首页 » 新闻 » 教程 » 正文

移动端HTML5开发心得

放大字体  缩小字体 发布日期:2020-06-22 01:12:04    浏览次数:8
导读

  shadowHunt:大佬我想问下,数据中有一个没有pid,把他放在最外层,出了给他加个pid,还有别的方法吗  1,iOS里固定中有输入或者textarea,用户在里面输入文字,触发键盘,固定容器会客显示,而不是是连续悬浮  4,百度的touch.js通过touch.on进行绑定事件,但是点击会遇到点透问题,也就是父级触发,子级触发  之前

  shadowHunt:大佬我想问下,数据中有一个没有pid,把他放在最外层,出了给他加个pid,还有别的方法吗

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

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

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

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

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

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

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

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

  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/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  iOS 4.0+使用英文字体Helvetica Neue,之前的iOS版本降级使用Helvetica。中文字体设置为华文黑体STHeiTi。需补充说明,华文黑体并不存在iOS的字体库中(),但系统会自动将华文黑体STHeiTi兼容命中系统默认中文字体黑体 - 简或黑体 - 繁

  ,发现做手机网站没有想象中的那么难。为什么会这么说呢?我们试想下:我们连传统的PC网站都会做,难道连一个小小的手机网站难道都搞不定吗?其实手机网站就是一个微缩版的PC网站罢了!至于为什么觉得难、觉得无从下手。段亮觉得有以下几点:一、没有完整的思路和流程就像做网站的流程一样,如果你能知道它的流程,我相信就不会觉得做手机网站难!真正难的是你没有思...

  手机网站的话,基本可以划分两类来做到。一类是通过在网页头部添加meta标签进行实现(网页指

  )。另一类是通过CSS3的Media标签(媒介查询)来实现。    在这里我们详细讲解下,利用添加meta标签来做手机网站。基本在网页头部我们只需添加四个meta标签就可以实现一个手机网站的框架。我一起来看看是哪些meta标签。1、添加viewport标签......

  工具有很多,本文介绍Hbuilder、WebStorm。Hbuilder简介 HBuilder是DCloud(数字天堂)推出的一款支持

  IDE。安装 直接从Hbuilder官网下载进行安装即可。 使用 新建项目 1、文件 → 新建 → 选择Web项目或者直接点击右侧新建Web项目 2、填写项目名称,存储位置,点击完成。 3、左边栏介...

  框架,但真正优秀的框架只有少数几个。本文将会比较其中五个最佳的框架。每个框架都有自己的优点和缺点,以及具体的应用领域,你可以根据自己的具体项目需求进行选择。此外,许多选项都是模块化的,允许你仅使用所需的组件,甚至可以混合使用来自不同框架的组件。本文依据各个框架的GitHub流行度来顺序介绍。BootstrapBootstrap是目前可用框架中无可争议的领导......

  而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 1.首先,选取一款手机的屏幕宽高作为基准(现在一般选取iphone6的37

  68。 2.对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对iphone6而言:原先的37

 
关键词: 手机html5开发
(文/小编)
打赏
免责声明
• 
本文为小编原创作品,作者: 小编。欢迎转载,转载请注明原文出处:http://www.31duo.com/news/show-301589.html 。本文仅代表作者个人观点,本站未对其内容进行核实,请读者仅做参考,如若文中涉及有违公德、触犯法律的内容,一经发现,立即删除,作者需自行承担相应责任。涉及到版权或其他问题,请及时联系我们。
 

(c)2016-2019 31DUO.COM All Rights Reserved浙ICP备19001410号-4

浙ICP备19001410号-4