web前端面试题-移动开发篇(持续更新...)

2019-11-10 admin

继续分享我整理了5年的面试题

html:https://segmentfault.com/a/1190000020888959

css:https://segmentfault.com/a/1190000020898762

javascript:https://segmentfault.com/a/1190000020933141

jquery:https://segmentfault.com/a/1190000020938095

另外附上课程链接:https://www.3mooc.com/front/l…

1,ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉

ios用户点击一个链接,会出现一个半透明灰色遮罩, 如果想要禁用,可设置-webkit-tap-highlight-color的alpha值为0,也就是属性值的最后一位设置为0就可以去除半透明灰色遮罩 a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}

2,webkit表单输入框placeholder的颜色值能改变么

input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}

3,webkit表单输入框placeholder的文字能换行么

ios可以,android不行~ 在textarea标签下都可以换行~

4,禁止ios 长按时不触发系统的菜单,禁止ios&android长按时下载图片

.css{-webkit-touch-callout: none}

5,禁止ios和android用户选中文字

.css{-webkit-user-select:none}

6,打电话发短信写邮件怎么实现

打电话:    <a href="tel:0755-10086">打电话给:0755-10086</a>
发短信,winphone系统无效    <a href="sms:10086">发短信给: 10086</a>
写邮件:    <a href=“mailto:peun@foxmail.com">peun@foxmail.com</a>

7,模拟按钮hover效果

移动端触摸按钮的效果,可明示用户有些事情正要发生,是一个比较好体验,但是移动设备中并没有鼠标指针,使用css的hover并不能满足我们的需求,还好国外有个激活移动端css的active效果。

1,直接在body上添加ontouchstart,同样可激活移动端css的active效果,比较推荐这种方式(兼容性ios5+、部分android 4+、winphone 8) 2,要做到全兼容的办法,可通过绑定ontouchstart和ontouchend来控制按钮的类名

8,audio元素和video元素在ios和andriod中无法自动播放

应对方案:触屏即播

 $('html').one('touchstart',function(){
   audio.play()
 })

9,消除transition闪屏

网络都是这么写的,但我并没有测试出来

.css{
    /*设置内嵌的元素在 3D 空间如何呈现:保留 3D*/
    -webkit-transform-style: preserve-3d;
    /*(设置进行转换的元素的背面在面对用户时是否可见:隐藏)*/
    -webkit-backface-visibility: hidden;
}

10,开启硬件加速

1,解决页面闪白 2,保证动画流畅

.css {
       -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
       -ms-transform: translate3d(0, 0, 0);
       transform: translate3d(0, 0, 0);
}

11,取消input在ios下,输入的时候英文首字母的默认大写

<input autocapitalize="off" autocorrect="off" />

12,android 上去掉语音输入按钮

input::-webkit-input-speech-button {display: none}

13,H5页面窗口自动调整到设备宽度,并禁止用户缩放页面

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

14,忽略将页面中的数字识别为电话号码

<meta name="format-detection" content="telephone=no" />

15,忽略Android平台中对邮箱地址的识别

<meta name="format-detection" content="email=no" />

[转载]原文链接:https://segmentfault.com/a/1190000020943838

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-78877.html

文章标题:web前端面试题-移动开发篇(持续更新...)

相关文章
梳理前端开发使用eslint-prettier检查和格式化代码
问题痛点 在团队的项目开发过程中,代码维护所占的时间比重往往大于新功能的开发。因此编写符合团队编码规范的代码是至关重要的,这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性。 对于代码版本管理系统(svn 和 git或者其他)...
2018-05-07
Web前端开发与iOS终端开发的异同
毕业之前一直在做前端开发,毕业后就转成做iOS开发,这两者有很多挺有意思的对比,尝试写下我能想到的它们的一些相同点和不同点。 语言 前端和终端作为面向用户端的程序,有个共同特点:需要依赖用户机器的运行环境,所以开发语言基本上是没有选择的,...
2016-01-13
js实现鼠标左右移动,图片也跟着移动效果
效果:鼠标往左移,图片对应右移,鼠标往右移,图片就左移动。图片距离越远偏移距离越大。 思路:首先获取图片原先的距离。设置一个变化值,图片的最终距离等于原先的距离加上变化值 布局:大盒子里面是图片,大盒子position:relative;图...
2017-02-17
HTML5游戏2015年的开发趋势
在互联网行业中,一个行业从零到成熟,开发者生态也是对应的,我们今年看到很多大公司,包括像微软和Google,也参与到了HTML5 开发者生态的建设当中。关于HTML5移动游戏的开发和盈利生态的走向又该去往何处?下面我们来试着讨论一下。 《围...
2015-11-12
Html5 是否适合移动应用开发
HTML5最近这几年声誉鹊起,而基于HTML5技术的产品也风生水起。感觉现在你的产品要是不和HTML5沾点边,都不好意思和客户打招呼!移动应用开发中,HTML5更是不可或缺的角色,市面上不少移动应用中间件产品都号称支持HTML5,例如APP...
2015-11-12
前端MV*框架的意义
经常有人质疑,在前端搞MV有什么意义?也有人提出这样的疑问:以AngularJS,Knockout,BackBone为代表的MV框架,它跟jQuery这样的框架有什么区别?我jQuery用得好好的,有什么必要再引入这种框架? 回答这些问题之...
2016-03-11
前端问答社区成立了
由雷锋网友提供的给大家相互交流的前端问答社区正式上线了,欢迎大家来此相互交流相互学习 ...
2016-03-30
[翻译]基于Webpack4使用懒加载分离打包React代码
原文地址:https://engineering.innovid.com/code-splitting-using-lazy-loading-with-react-redux-typescript-and-webpack-4-3ec601...
2018-03-11
2015 Web 2.0和AJAX如何做好优化
2015如何让做好web2.0和ajax的优化?JavaScript中文网总结当下提出以下四大优化意见,旨在帮助W前端开发人员有效利用APM解决上述问题。 随着Web应用程序速度与效率快速增长,网站已经成为企业与其客户进行交互的第一途径——...
2015-11-12
node.js调用C++开发的模块实例
如何用C++和node交互,在node的程序中,如果有大数据量的计算,处理起来比较慢,可以用C++来处理,然后通过回调(callback的形式),返回给node。先回顾一下正统的用 C++ 开发 native 模块的方法 #include ...
2017-03-25
回到顶部