课程咨询:400-111-8989

  • HTML5开发程序过程中常见问题有哪些?

    发布:HTML5培训  来源:粤嵌教育  时间: 2017年04月27日

  • 今天小编要跟大家分享的是在HTML培训过程中常见问题集锦,来看看这些问题你中过几个吧!...

  • 今天小编要跟大家分享的是在HTML培训过程中常见问题集锦,来看看这些问题你中过几个吧!

    链接点击时有边框

    /* android、IOS 点击一个链接时 **会出现一个边框** 或者半透明灰色遮罩 */

    a,button,input,textarea {

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

    -webkit-user-modify:read-write-plaintext-only;

    }

    不自动识别电话或email。

    <!-- 忽略识别号码 -->

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

    <!-- 忽略识别email -->

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

    移动端200-300ms的延迟响应

    <!-- 1. fastclick可以解决在手机上点击事件的300ms延迟 -->

    <!-- 2. zepto的touch模块,tap事件也是为了解决在click的延迟问题 -->

    拉动滚动条时延迟或卡顿

    /* 上下拉动滚动条时出现 __卡顿、慢__ 情况 */

    body {

    -webkit-overflow-scrolling: touch;

    overflow-scrolling: touch;}

    禁止复制或选中文本

    Element {

    -webkit-user-select: none;

    -moz-user-select: none;

    -khtml-user-select: none;

    user-select: none;}

    长时间按住页面出现闪退

    element { -webkit-touch-callout: none; }

    输入框默认内阴影

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

    element{ -webkit-appearance: none; }

    某些安卓手机圆角失效

    element{ background-clip: padding-box; }

    旋转时字体大小调整

    /* 旋转屏幕时,字体大小调整的问题 */

    html, body, p, div {

    -webkit-text-size-adjust:100%;}

    按钮样式被默认样式覆盖

    /* ios 设置input 按钮样式会被默认样式覆盖 */

    input,

    textarea {

    border: 0;

    -webkit-appearance: none;

    }

    默认首字母大写

    <!-- IOS键盘字母输入,默认首字母大写 -->

    <input type="text" autocapitalize="off" />

    行高无法垂直居中的问题

    /* line-height 在移动端的无法垂直居中的问题 */

    html{-webkit-text-size-adjust:none;}

    /* 不知道管不管用,还没试 */

    改变placeholder的字体颜色

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

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

    禁止长按触发系统菜单

    /* 禁止ios长按时触发系统的菜单,以防 ios或者android 长按时下载该图片 */

    .css

    /* */{-webkit-touch-callout: none}

    下拉选择设右对齐

    /* select 下拉选择设置右对齐 */

    select option {

    direction: rtl;

    }

    动画定义3D硬件加速

    /* */

    element {

    -webkit-transform:translate3d(0, 0, 0)

    transform: translate3d(0, 0, 0);}

    /* 注意:3D变形会消耗更多的内存与功耗 */

    Retina屏的1px边框

    element{

    border-width: thin;}

    transition闪屏

    /* */

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

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

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

    -webkit-backface-visibility:hidden;}

    浏览器私有及其它meta

    QQ浏览器私有 <!-- 全屏模式 -->

    <meta name="x5-fullscreen" content="true">

    <!-- 强制竖屏 -->

    <meta name="x5-orientation" content="portrait">

    <!-- 强制横屏 -->

    <meta name="x5-orientation" content="landscape">

    <!-- 应用模式 -->

    <meta name="x5-page-mode" content="app">

    UC浏览器私有 <!-- 全屏模式 -->

    <meta name="full-screen" content="yes">

    <!-- 强制竖屏 -->

    <meta name="screen-orientation" content="portrait">

    <!-- 强制横屏 -->

    <meta name="screen-orientation" content="landscape">

    <!-- 应用模式 -->

    <meta name="browsermode" content="application">

    唤起select的option展开

    /* zepto方式: */

    $(sltElement).trrgger("mousedown");

    /* 原生js方式:*/

    function showDropdown(sltElement) {

    var event;

    event = document.createEvent('MouseEvents');

    event.initMouseEvent('mousedown', true, true, window);

    sltElement.dispatchEvent(event);

    };

    判断手机的类型

    var user="";

    if (/android/i.test(navigator.userAgent)){

    // android

    user="1";

    }

    if (/ipad|iphone|mac/i.test(navigator.userAgent)){

    // ios

    user="0";

    }

    判断是否来自微信浏览器

    function isFromWeiXin() {

    var ua = navigator.userAgent.toLowerCase();

    if (ua.match(/MicroMessenger/i) == "micromessenger") {

    return true;

    }

    return false;

    }

    屏幕旋转的事件

    window.onorientationchange = function(){

    switch(window.orientation){

    case -90:

    case 90:

    alert("横屏:" + window.orientation);

    case 0:

    case 180:

    alert("竖屏:" + window.orientation);

    break;

    }

    }

    屏幕旋转时如何操作

    /* */

    /* 竖屏时使用的样式 */

    @media all and (orientation:portrait) {

    .css

    /* */{}

    }

    /* 横屏时使用的样式 */

    @media all and (orientation:landscape) {

    .css

    /* */{}

    }

    video无法自动播放

    /* video无法自动播放的问题 | 应对方案:触屏即播 */

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

    audio.play()

    })

    手机拍照和上传图片

    <!-- 选择照片 -->

    <input type=file accept="image/*">

    <!-- 选择视频 -->

    <input type=file accept="video/*">

    输入时首字母默认大写

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

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

    上去掉语音输入按钮

    /* android */

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

    如果在HTML培训过程中没有遇到以上问题,说不定工作中会遇到哦,添加达内官网收藏吧,想了解随时能找到。

  • 上一篇:HTML5开发常用的框架有哪些?

    下一篇:HTML5与Web前端之间有什么区别?

网站导航
2001-2016 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56