前端开发常遇问题以及解决方案

发布时间：2019-04-24 编辑：杰霖 浏览：8746 评论：0

1.免点击获取焦点外围阴影太大

input:focus, textarea:focus, select:focus {

  outline-offset: -2px;

}

 

2. H5页面窗口需要自动调整到设备宽度，并禁止用户缩放页面

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

 

3. 禁止将页面中的数字识别为电话号码

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

 

4. 忽略Android平台中对邮箱地址的识别

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

 

5.当网站添加到主屏幕快速启动方式，可隐藏地址栏（仅针对ios的safari有效）

<meta name="apple-mobile-web-app-capable" content="yes" />

 

6.viewport模板,viewport模板——通用

<meta charset="utf-8">

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

<meta content="yes" name="apple-mobile-web-app-capable">

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

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

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

 

7.移动端如何定义字体font-family,中文字体使用系统默认，英文用Helvetica

/* 移动端定义字体的代码 */

body{font-family:Helvetica;}

 

8.移动端字体单位font-size选择px还是rem

对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可

对于需要适配各种移动设备，使用rem

媒体查询配置参考：

html{font-size:10px}

@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}

@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}

@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}

@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}

@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}

@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}

@media screen and (min-width:800px){html{font-size:25px}}

 

9.移动端touch事件(区分webkit 和 winphone),当用户手指放在移动设备在屏幕上滑动会触发的touch事件,以下支持webkit

touchstart——当手指触碰屏幕时候发生。不管当前有多少只手指

touchmove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动

touchend——当手指离开屏幕时触发

touchcancel——系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()一个提示框，此时会触发该事件，这个事件比较少用

11.移动端click屏幕产生200-300 ms的延迟响应

 

10.移动设备上的web网页是有300ms延迟的，往往会造成按钮点击延迟甚至是点击失效

解决方案 ：

fastclick 可以解决在手机上点击事件的300ms延迟

zepto 的 touch 模块， tap 事件也是为了解决在click的延迟问题

 

11.触摸事件的响应顺序

1、ontouchstart

2、ontouchmove

3、ontouchend

4、onclick

解决300ms延迟的问题，也可以通过绑定ontouchstart事件，加快对事件的响应

 

12.什么是Retina 显示屏，带来了什么问题

retina：一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样带下的屏幕上，苹果设备的retina显示屏中，像素点1个变为4个

在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统PC的2倍

那么，前端的应对方案是：

设计稿切出来的图片长宽保证为 偶数 ，并使用 backgroud-size 把图片缩小为原来的 1/2

//例如图片宽高为：200px*200px，那么写法如下

.css{

    width:100px;

    height:100px;

    background-size:100px 100px;

}

其它元素的取值为原来的1/2，例如视觉稿40px的字体，使用样式的写法为20px

13.ios系统中元素被触摸时产生半透明灰色遮罩

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

a,button,input,textarea {

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

}

14.部分android系统中元素被点击时产生边框

android用户点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样，可设置 -webkit-tap-highlight-color 的 alpha 值为 0 去除部分机器自带的效果

a,button,input,textarea{

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

}

对于按钮类还有个办法，不使用a或者input标签，直接用div标签

15.WP系统a、input标签被点击时产生的半透明灰色背景怎么去掉

 

16.webkit表单元素的默认外观怎么重置

.css{

    -webkit-appearance:none;

}

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

答案是可以的，如下

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

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

18.webkit表单输入框placeholder的文字能换行么

ios可以，android不行~

在textarea标签下都可以换行~

19.IE10（winphone8）表单元素默认外观如何重置

禁用 select 默认下拉箭头

::-ms-expand 适用于表单选择控件下拉箭头的修改，有多个属性值，设置它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。

select::-ms-expand {

display: none;

}

禁用 radio 和 checkbox 默认样式

::-ms-check 适用于表单复选框或单选按钮默认图标的修改，同样有多个属性值，设置它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。

input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{

display: none;

}

禁用PC 端表单输入框默认清除按钮

当表单文本输入框输入内容后会显示文本清除按钮，::-ms-clear 适用于该清除按钮的修改，同样设置使它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。

input[type=text]::-ms-clear,input[type=tel]::-ms-clear,input[type=number]::-ms-clear{

display: none;

}

20.禁止iOS长按时触发系统的菜单，禁止iOS&android长按时下载图片

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

21.禁止iOS和android用户选中文字

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

 

22.打电话发短信写邮件怎么实现

打电话

<a href="tel:0755-10086">打电话给:0755-10086</a>

发短信，winphone系统无效

<a href="sms:10086">发短信给: 10086</a>

<a href="mailto:peun@foxmail.com%3c/a">peun@foxmail.com&gt;</a>

 

23.audio元素和video元素在ios和andriod中无法自动播放

$('html').one('touchstart',function(){

    audio.play()

})

 

24.手机拍照和上传图片

使用 的 accept 属性,比如下面改input只支持.gif jpeg的格式

<input type="file" accept="image/gif, image/jpeg">

 

25.微信浏览器用户调整字体大小后页面变矬了，怎么阻止用户调整

ios使用 -webkit-text-size-adjust 禁止调整字体大小, 最好的解决方案：整个页面用rem或者百分比布局

body{-webkit-text-size-adjust: 100%!important;}

 

26.消除transition闪屏

.css{

/*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/

-webkit-transform-style: preserve-3d;

/*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/

-webkit-backface-visibility: hidden;

}

 

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

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

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

 

28.android 上去掉语音输入按钮

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

 

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

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

a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}

 

30.webkit表单输入框placeholder的颜色值能改变么？

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

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

 

31.禁用 radio 和 checkbox 默认样式

::-ms-check 适用于表单复选框或单选按钮默认图标的修改，同样有多个属性值，设置它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。

input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{

display: none;

}

 

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

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

 

33.禁止ios和android用户选中文字

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

 

34.谷歌浏览器表单自动密码填充颜色问题

input:-webkit-autofill {

  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;

  -webkit-text-fill-color: #3E3E3E !important;

}

 

35.禁用PC端表单输入框默认清除按钮

当表单文本输入框输入内容后会显示文本清除按钮，::-ms-clear 适用于该清除按钮的修改，同样设置使它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。

input[type=text]::-ms-clear,input[type=tel]::-ms-clear,input[type=number]::-ms-clear{

display: none;