移动端开发 干货知识分享

简介:

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如需转载请自行联系原作者


@挨踢前端

相关文章
|
9月前
|
编解码 前端开发 UED
Web前端开发中的响应式设计技巧
【2月更文挑战第6天】在当今互联网快速发展的时代,网站的响应式设计已经成为Web前端开发的重要一环。本文将介绍一些实用的响应式设计技巧,帮助开发者更好地应对不同屏幕尺寸和设备的挑战,提升用户体验。
132 1
|
4月前
|
存储 JavaScript 开发者
探索鸿蒙新世界:ArkUI框架实战指南,解锁HarmonyOS应用UI设计的无限可能!
【10月更文挑战第19天】ArkUI框架是华为鸿蒙系统中用于开发用户界面的核心工具,支持ArkTS和eTS两种开发语言。本文介绍了ArkUI的基本概念、组件使用、布局管理和状态管理,通过示例代码帮助开发者轻松构建美观、高效的跨设备UI。
332 3
|
4月前
|
前端开发 安全 Android开发
跨平台开发的新纪元:Tauri 2.0 横空出世,移动端、桌面端一网打尽!
Tauri 2.0 正式版于 2024 年 10 月 2 日发布,带来了多项重大更新。此次更新不仅全面支持 iOS 和 Android,实现“一次编写,到处运行”,还升级了插件系统,增强了灵活性与可扩展性。安全性大幅提升,引入新的权限系统,并优化了 IPC 层,支持原始有效载荷传输,大幅提高性能。此外,Tauri 2.0 还支持热模块替换(HMR),简化了应用分发流程,成为跨平台开发的重要里程碑。
829 0
跨平台开发的新纪元:Tauri 2.0 横空出世,移动端、桌面端一网打尽!
|
6月前
|
移动开发 前端开发 JavaScript
"跨界大战!React Native、Weex、Flutter:三大混合开发王者正面交锋,揭秘谁才是你移动应用开发的终极利器?"
【8月更文挑战第12天】随着移动应用开发的需求日益增长,高效构建跨平台应用成为关键。React Native、Weex与Flutter作为主流混合开发框架各具特色。React Native依托Facebook的强大支持,以接近原生的性能和丰富的组件库著称;Weex由阿里巴巴开发,性能优越尤其在大数据处理上表现突出;Flutter则凭借Google的支持及独特的Dart语言和Skia渲染引擎,提供出色的定制能力和开发效率。选择时需考量项目特性、团队技能及生态系统的成熟度。希望本文对比能助你做出最佳决策。
212 1
|
9月前
|
编解码 前端开发 UED
Web前端开发中的移动端适配与响应式设计
【2月更文挑战第11天】 对于现代 Web 前端开发而言,移动端适配与响应式设计是至关重要的技术环节。移动设备的普及使得用户更多地通过手机或平板设备访问网站,因此,如何有效地适配各种屏幕尺寸并提供良好的用户体验成为了前端开发者需要面对的重要问题。本文将介绍移动端适配与响应式设计的基本原理,并结合实际案例探讨其在前端开发中的应用。
|
移动开发 JavaScript 前端开发
探究Uniapp在移动端开发中的应用
探究Uniapp在移动端开发中的应用
232 0
|
前端开发
前端知识案例-响应式设计
前端知识案例-响应式设计
85 0
前端知识案例-响应式设计
|
移动开发 编解码 前端开发
移动端H5网页开发必备知识
H5网页开发必备知识
173 0
|
缓存 前端开发 JavaScript
移动端开发优化总结
首屏数据请求提前,避免 JavaScript 文件加载后才请求数据 为了进一步提升页面加载速度,可以考虑将页面的数据请求尽可能提前,避免在 JavaScript 加载完成后才去请求数据。通常数据请求是页面内容渲染中关键路径最长的部分,而且不能并行,所以如果能将数据请求提前,可以极大程度上缩短页面内容的渲染完成时间。
942 0
|
Web App开发 编解码 前端开发
好程序员web前端技术分享移动端页面布局
好程序员web前端技术分享移动端页面布局一、弹性布局(100%布局)的特点顶部与底部的bar不管分辨率怎么变,它的⾼度和位置都不变; 中间每条招聘信息不管分辨率怎么变,招聘公司的图标等信息 都位于条目的左边,薪资都位于右边.特点:关键元素高宽和位置都不变,只有容器元素在做伸缩变换。
1606 0