您现在的位置是:首页 >程序人生 >WEB前端

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

发布时间:2019-04-24 编辑:杰霖 浏览:5847 评论: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;