移动平台前端开发总结

移动平台前端开发总结（ios，Android）

首先我们来看看webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用

强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；尤其要注意的是content里多个属性的设置一定要用分号+空格来隔开，如果不规范将不会起作用。 iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览 iphone的私有标签，它指定的iphone中safari顶端的状态条的样式告诉设备忽略将页面中的数字识别为电话号码

h5页面有个很蛋疼的问题就是，当输入框在最底部，点击软键盘后输入框会被遮挡。

//可采用如下方式解决

var oHeight = $(document).height(); //浏览器当前的高度

$(window).resize(function(){

if($(document).height() < oHeight){ $("#footer").css(“position”,“static”); }else{ $("#footer").css(“position”,“absolute”); }

});

input 的placeholder会出现文本位置偏上的情况：

PC端设置line-height等于height能够对齐，而移动端仍然是偏上，解决是设置line-height：normal;

在移动端修改难看的点击的高亮效果，iOS和安卓下都有效：

*{-webkit-tap-highlight-color:rgba(0,0,0,0);}

Zepto点透的解决方案

(1)引入fastclick.js，在页面中加入如下js代码

window.addEventListener( “load”, function() { FastClick.attach( document.body ); }, false );

上下拉动滚动条时卡顿、慢

body { -webkit-overflow-scrolling:touch; overflow-scrolling: touch; }

6.禁止复制、选中文本

Element { -webkit-user-select:none; -moz-user-select:none; -khtml-user-select:none; user-select:none; }

iphone及ipad下输入框默认内阴影

Element{ -webkit-appearance:none; }

ios和android下触摸元素时出现半透明灰色遮罩

Element { -webkit-tap-highlight-color:rgba(255,255,255,0) }

圆角bug

某些Android手机圆角失效
解决方案：background-clip: padding-box;

10.顶部状态栏背景色

<meta name="apple-mobile-web-app-status-bar-style"content="black"/>

11.桌面图标

<link rel="apple-touch-icon"href="touch-icon-iphone.png"/> <link rel="apple-touch-icon"sizes="76x76"href="touch-icon-ipad.png"/> <link rel="apple-touch-icon"sizes="120x120"href="touch-icon-iphone-retina.png"/> <link rel="apple-touch-icon"sizes="152x152"href="touch-icon-ipad-retina.png"/>

12.移动端 HTML5 audio autoplay 失效问题

document.addEventListener(‘touchstart’,function() { document.getElementsByTagName(‘audio’)[0].play(); document.getElementsByTagName(‘audio’)[0].pause(); });

13.js处理img标签加载图片失败，显示默认图片

如果img标签是少量的话，可以用这个： img的onerror事件

<img src='test.jpg' alt='test' onerror="this.src='default.jpg'">

14.CSS 强制不换行，多出的文字显示省略号

{ white-space: nowrap; //文本强制不换行； text-overflow:ellipsis; //文本溢出显示省略号； overflow:hidden; //溢出的部分隐藏； }

移动平台前端开发总结相关推荐

微信公众平台前端开发技巧分享
这个是第三方跳转的网站微信公众平台前端开发技巧分享微信公众平台新版微信做了更改,此文提到的部分方法可能已经不再适用,请关注微信官方开放平台:http://open.weixin.qq.com/d ...
移动平台前端开发总结（针对iphone，Android等手机）
移动平台前端开发是指针对高端智能手机(如Iphone.Android)做站点适配也就是WebApp,并非是针对普通手机开发Wap 2.0,所以在阅读本篇文章以前,你需要对webkit内核的浏览器有一定 ...
移动平台WEB前端开发技巧汇总
原名<移动平台3G手机网站前端开发布局技巧汇总>,由武方博整理的,让我们了解下移动设备上的WEB站点开发的基础知识,多些时间和精力去优化其他细节,我这里对原文的标签格式做了细微的调整,阅读 ...
推荐一款多平台快速开发的前端UI框架 —— uView UI
本人体验了一遍,风格简约,功能齐全,正是心心念念的前端UI框架配合uni-app 真正是一款多平台开发的神器!! 强烈推荐!! 官网直达:uView UI 体验链接:uView多平台前端开发UI - ...
移动平台3G手机网站前端开发布局技巧汇总
您或许正在或准备参与一个WepApp项目,您或许正在Google搜索mobile development相关的文章,您或许是一名专业的WEB前端工程师,您或许想学习Mobile前端开发方面的技术,如果 ...
agilebpm脑图_设计开发平台前端框架介绍 | AgileBPM 敏捷工作流开发平台—开源免费-基于 Activiti 工作流引擎、Flowable...
目前设计平台前端是独立部署的,引入了 Angular 和 Vue,您可以根据自己技术强项选择使用 Angular 或者 Vue,他们引入的成本都很小. 比如我们团队使用 Angular 很多年了,依 ...
十次方专属社交平台前端系统开发网站前台-活动与招聘
学习目标: 掌握NUXT框架的基本使用方法完成十次方网站前台的搭建完成十次方网站前台活动模块的功能完成十次方网站前台招聘模块的功能 1服务端渲染技术NUXT 1.1什么是服务端渲染服务端渲染又 ...
直播平台软件开发的前端如何实现整套视频直播技术流程
直播平台软件开发的前端如何实现整套视频直播技术流程正文下面按照目录大纲来一个一个讲解. 1. 直播技术的介绍直播技术涵盖很广,现如今大家广泛了解的就有视频网站的个人直播.手机直播.安防方面的摄像 ...
监控平台前端SDK开发实践
监控是提高故障处理能力和保障服务质量必需的一环,它需要负责的内容包括:及时上报错误.收集有效信息.提供故障排查依据. 及时上报错误:发生线上问题后,经由运营或者产品反馈到开发人员,其中流转过程可能是几 ...
Hubble A/B test平台前端项目开发浅谈
前言现在Hubble abtest平台已经正式上线了,至于技术实现方案我在其中一篇文章做了一些分享(查看react技术栈实践),本文主要分享下一些开发过程中的遇到问题思考总结,以及简单介绍下我们平台 ...

移动平台前端开发总结

移动平台前端开发总结（ios，Android）

移动平台前端开发总结相关推荐

最新文章

热门文章