开发者社区> 最美的回忆> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

移动端开发 干货知识分享

简介:
+关注继续查看

1、在手机端如果1px线条仍然显示过粗,可以使用css新属性border-image边框图像来解决

     例:border-image: url(../img/line-img1.png) 2 0 round;

     关于border-image熟悉的介绍:http://www.w3cplus.com/content/css3-border-image

 

2、在部分安卓机上使用border-image后,发现内容区域设置 :active 后不起作用。

     原因:border-image 后面默认加了fill关键字

     解决办法:使用的边框图片,图片中间区域背景一定要是透明的。

 

3、部分安卓机对键盘事件不兼容,如果是对输入框内容监听变化可用input事件

 

4、部分iphone上,页面内如果有position:fixed固定内容,第一次滑动页面时,固定内容会随页面滑动,松开手后,内容回到原位。bug原因和覆盖范围未知。

      解决办法:用js控制固定内容第一次滑动时的的top值

 

5、防止按钮点击时 背景闪烁

      html{

          -webkit-tap-highlight-color: transparent;

      }

 

6、设置input的placeholder内容样式的方法

    input::-webkit-input-placeholder{
        color:#999;
        font-size: 14px;
    }

7、兼容iOS伪类 :active   需要给 document 绑定 touchstart 或 touchend 事件
    document.addEventListener('touchstart',function(){},false);

 

8、消除 IE10 里 input输入框右侧的叉号

      input:-ms-clear{ display:none; }

 

9、 禁止用户选中文字

     -webkit-user-select:none

 

10、腾讯移动端解决方案

        https://github.com/AlloyTeam/Mars

 

11、移动设备尺寸大全

      http://screensiz.es/phone​

 

12、各种参考手册

         css: http://css.doyoe.com/

         javascript:  https://msdn.microsoft.com/zh-CN/library/yek4tbz0.aspx

         zepto:  http://www.css88.com/doc/zeptojs_api/

         jquery: http://tool.oschina.net/apidocs/apidoc?api=jquery

 

13、input输入框输入内容后,点击自定义清空内容的按钮,键盘收起的问题
       解决办法:按钮用input标签,改变样式为按钮样子,点击删除后,设置原输入框focus();

本文转自挨踢前端博客园博客,原文链接http://www.cnblogs.com/duanhuajian/p/4643393.html如需转载请自行联系原作者


@挨踢前端

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
第133天:移动端开发的一些总结
1、 piexl 像素知识 640 * 1136的图片能不能在iphone5上完全展示?iphone5分辨率640*1136 逻辑像素与物理像素的关系px逻辑像素:浏览器使用的抽象单位dp,pt物理像素:设备无关像素dpr:设备像素缩放比计算公式:1px = (dpr)^2 * dpiphone5的...
1126 0
第135天:移动端开发经验总结
一、移动端三种布局   1、有最大、最小宽度的百分比自适应布局   适用场景:门户网站首页,图片较多的首页。   2、百分比自适应布局   适用场景:信息文字较多的网页,内容较多网页。   3、全屏自适应布局   适用场景:单页面网页,移动web app 页面。
1137 0
使用基于Vue.js和Hbuilder的混合模式移动开发打造属于自己的移动app
近几年,混合模式移动应用的概念甚嚣尘上,受到了一些中小型企业的青睐,究其原因,混合模式开发可以比传统移动开发节约大量的开发成本和人力成本。 Hybrid App(混合模式移动应用)是指介于web-app、native-app这两者之间的app,兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。
0 0
移动端开发优化总结
首屏数据请求提前,避免 JavaScript 文件加载后才请求数据 为了进一步提升页面加载速度,可以考虑将页面的数据请求尽可能提前,避免在 JavaScript 加载完成后才去请求数据。通常数据请求是页面内容渲染中关键路径最长的部分,而且不能并行,所以如果能将数据请求提前,可以极大程度上缩短页面内容的渲染完成时间。
739 0
移动开发工具推荐
Android:豌豆夹,快速连接手机的利器。腾讯的应用宝也好,360的手机助手也好,在插入USB之后,确实不如豌豆夹好使,谁用谁知道。如果连接了USB还是不能识别设备,请使用以下几种方式: 1、拔掉USB连接线,关闭开发者选项,然后重启开启再连接手机; 2、启动任务管理器,查看是不是有些软件偷偷的启动了一些什么服务,常见的: adb.exe tadb.exe AndroidServer.exe 找到类似这样的进程,然后杀掉,有一些还不让你杀,那你就得借助工具把它干掉了。
543 0
挑战21天手写前端框架 day17 移动端屏幕适配方案实现
挑战21天手写前端框架 day17 移动端屏幕适配方案实现
0 0
移动开发UI库
参考链接:http://www.cnblogs.com/edobnet/archive/2012/08/17/2643573.html   自己总结:   jquery 的移动开发UI库  http://jquerymobile.com   比较方便,插件也挺多的。
360 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
《优酷响应式布局技术全解析》
立即下载
Re: 移动开发的未来
立即下载
PWA 移动Web的现在与未来
立即下载