精华内容
下载资源
问答
  • H5页面在移动端无法满屏自适应窗口,怎么办? <meta name="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> H5页面在移动端字体应该...

    H5页面在移动端无法满屏自适应窗口,怎么办?

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

     

    H5页面在移动端字体应该怎么设置?

    1.iOS 系统

    默认中文字体是Heiti SC

    默认英文字体是Helvetica

    默认数字字体是HelveticaNeue

    无微软雅黑字体

    2.Android 系统

    默认中文字体是Droidsansfallback

    默认英文和数字字体是Droid Sans

    无微软雅黑字体 

    3.Winphone 系统

    默认中文字体是Dengxian(方正等线体)

    默认英文和数字字体是Segoe

    无微软雅黑字体

    各个手机系统有自己的默认字体,且都不支持微软雅黑,如无特殊需求,手机端无需定义中文字体,使用系统默认英文字体和数字字体可使用 Helvetica ,三种系统都支持。

    font-family:Helvetica;

     

    点击链接就可以拨打电话,怎么办?

    <a href="tel:136****5546">咪咕阅读客服电话</a>

     

    点击链接就可以发送短信,怎么办?

    <a href="sms:136****5546">咪咕阅读客服短信</a>

     

    H5页面的数字不想识别为电话号码,怎么办?

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

     

    H5页面想忽略Android平台中对邮箱地址的识别,怎么办?

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

     

    不想显示webkit的滚动条,怎么办?

    element::-webkit-scrollbar{ display: none;}

    H5页面的内容想不被人选中,怎么办?

    -webkit-user-select: none;user-select: none;

     

    H5页面想禁止长按链接或长按图片后弹出菜单,怎么办?

    -webkit-touch-callout: none;

    想取消IOS里Button、Input上的默认样式,怎么办?

    -webkit-appearance: none;

     

    想在Android里H5页面touch时没有蓝色的边框与遮罩,怎么办?

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

    多张图片放置在一起,不想有4PX的空隙,怎么办?

    img{display:block};

    img{float:left};

    img{vertical-align:top} 

     

    想改变Input里 placeholder属性的样式,怎么办?

    ::-webkit-input-placeholder{color:#ccc}

     

    H5页面input type=”num”时想去掉右边的上下箭头,怎么办?

    input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none !important; margin: 0;}

    H5页面加载的图片太大了,怎么办?

    JPG图片用JPEGmini压缩,PNG可在线用http://tinypng.org/压缩

    在iOS系统中键盘输入时不想首字母为大写,怎么办?

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

    在IOS系统中键盘输入关闭自动修正,怎么办?

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

    屏幕旋转横屏竖屏切换时,想禁止文本缩放,怎么办?

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

    H5页面想有快速回弹滚动的效果,怎么办?

    overflow: auto; /* auto | scroll */

    -webkit-overflow-scrolling: touch;

    屏幕旋转横屏竖屏切换时想支持有不同的事件,怎么办?

    事件

    window.orientation,取值:正负90表示横屏模式、0和180表现为竖屏模式;

    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{}

    }

    Android 上想不显示语音输入按钮,怎么办?

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

    想开发H5摇一摇功能,怎么办?

    HTML5 deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据。

     

    https://github.com/FrontEndRoad/HTML5-FAQ

     

    转载于:https://www.cnblogs.com/cuikaitong/p/7120286.html

    展开全文
  • H5页面在移动端的兼容问题

    千次阅读 2018-07-26 08:36:45
    移动端的问题,其实我碰到的很多都在ios端,本来一个页面在安卓手机上跑得好好的,测试小哥突然抛个bug——ipnone7测试样式需要优化之类的,每次拿到这些问题,都更加坚定了我不想用苹果手机的决心…,下面我就将...

    本文首发我的简书

    论移动端的问题,其实我碰到的很多都在ios端,本来一个页面在安卓手机上跑得好好的,测试小哥突然抛个bug——ipnone7测试样式需要优化之类的,每次拿到这些问题,都更加坚定了我不想用苹果手机的决心…,下面我就将这些曾经困扰我的问题一一道来。
    1. <input type=number>在ios上可以改变键盘类型从而输入非数字(本来期望只能填入数字)
    解决办法:
    1>如果只需要输入整数的话可以直接使用<input type=tel>这个号码盘式的键盘可以保证ios与安卓端均不能切换键盘类型。
    2>如果需要输入的数字带有小数的话,目前我的解决办法只有先用type=number然后在表单提交的时候对input的value值进行正则判断了。(安卓即使切换了输入类型也只能输入数字,万恶的ios…)
    2. <input type=number maxlength=5>当设置type=number时maxlength,minlength无效(仅限ios…)
    解决方法:同样在表单提交的时候先使用正则判断一下。
    3. input的placeholder偏上,同样仅限ios
    解决办法:使input的字体大小大于等于 placeholder的字体大小,例如

    input {
        background-color: #f4f4f4;
        font-size: 0.14rem;
        color: #7f7f7f;
    }
    ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
        font-size:0.14rem;/*小于等于0.14rem即可*/
        color: #b2b2b2;
    }

    4.上传图片/文件失败后无法再次上传同一个文件(不限于移动端)
    解决办法:
    首先获取到传入文件的参数event(onchange方法的回调函数的参数event,在vue中则是@change的参数$event)
    event打印出来是这样的

    然后在每次向后台上传的时候首先执行event.target.value = ''即可。
    5. 文字偏上(ios)
    ios经常会出现button里面的文字偏上,还有类似于 “联系电话:xxxxxxx”xxxxx这一部分偏上的情况。
    解决方法:
    1>设置整行的height或者min-heightline-height保持相等,这个方法对于像 联系电话:xxxxx这样的还是有效的,但是对于按钮这样的可能没有效果。
    2>直接使用flex布局,专治各种疑难杂症(ios低版本注意加前缀-webkit-

    .btn{
            display:flex;
            flex-direction:column;/*对于button可以使用column,像label-content这种形式还是使用row吧*/
            align-items: center;
            justify-content: center;
    }

    6.较长的文字在安卓端一行显示,在ios会另起一行(在下一行显示)
    解决方法:ios端有个词叫做“安全区域”,可以理解为系统内置的padding,既然这样,我们就把这一行放文本元素的宽度改小一点吧(看起来旁边会有些留白)
    ps:1.这个问题可能不一定是安全区域的影响(查阅资料发现安全区域貌似是ios11才出来的,而我在使用同事的5s(ios9.3)测试的时候,也出现了该问题,所以就理解成ios有内置的padding吧)。
    2.这个问题的出现可能是ui设计存在一定的考虑不周(右侧没有设置padding)
    7. 时下流行的刘海屏适配问题
    解决方法:
    1>如果是在app里面的话还是交给原生去做好一些
    2>web app的话貌似浏览器应该会适配好了吧。。。
    3>实在要前端适配的话可以参考 关于H5页面在iPhoneX适配 (我自己没试过)

    展开全文
  • 该资源是SenchaTouch框架开发的移动端html5图片轮播缩放插件,功能包括手指滑动图片轮播图片缩放
  • 移动端h5轮播插件swipe

    千次阅读 2017-08-12 17:19:28
    移动端h5页面里,我们经常会有轮播图的需求,如果不需要太多的效果,只是简单的手指滑动和自动轮换效果的话,我比较推荐swipe插件,不过百度搜索到的这个插件,里面介绍的不是很完整,我给大家补充下可能需要的...

    在移动端的h5页面里,我们经常会有轮播图的需求,如果不需要太多的效果,只是简单的手指滑动和自动轮换效果的话,我比较推荐swipe插件,不过百度搜索到的这个插件,里面介绍的不是很完整,我给大家补充下可能需要的功能。


    swipe.js是一个轻量级js触摸滑动类库 – Swipe JS。这是一个非常小的一个javascript类库,但他的功能却不简单,它可以用来展示web页面上的任何内容,支持精确的触摸移动操作,而且还可以设置自动播放、等比例缩放等等实用性的功能。


    Swipe函数介绍

    下面就为大家介绍下Swipe JS的使用方法,Swipe有以下几个参数:

    startSlide: 4,  //起始图片切换的索引位置
    auto: 3000, //设置自动切换时间,单位毫秒
    continuous: true,  //无限循环的图片切换效果
    disableScroll: true,  //阻止由于触摸而滚动屏幕
    stopPropagation: false,  //停止滑动事件
    callback: function(index, element) {},  //回调函数,切换时触发
    transitionEnd: function(index, element) {}  //回调函数,切换结束调用该函数。

    除此之外,还有一些比较常用的API方法,例如:

    • prev():上一页
    • next():下一页
    • getPos():获取当前页的索引
    • getNumSlides():获取所有项的个数
    • slide(index, duration):滑动方法

    Swipe使用方法

    了解基本函数方法后,我们就来看看使用方法。

    首先是HTML结构:

    <div id="slider" class="swipe">
      <div class="swipe-wrap">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>

    然后是样式代码:

    .swipe {
    	overflow: hidden;
    	visibility: hidden;
    	position: relative;
    }
    .swipe-wrap {
    	overflow: hidden;
    	position: relative;
    }
    .swipe-wrap > figure {
    	float: left;
    	width: 100%;
    	position: relative;
    }

    最后设置JS绑定以及参数设置:

    var slider = Swipe(document.getElementById('slider'), {
       …………
       …………
    });

    在这里只要把上面介绍的函数参数写在里面,就可以实现相对应的功能。

    最后我们也可以给滑动切换添加上下按钮:

    <button οnclick="Swipe.prev()">prev</button>
    <button οnclick="Swipe.next()">next</button>


    另外我进行一些分页器效果的补充吧:

    如果需要分页那个点的效果的话,可以这么添加代码:


    nav标签部分就是分页器的相关部分拉,多少个slide就多少个li标签(如果需要分页器效果的童鞋就添加一个nav和ul标签即可,因为代表分页点的li标签需要动态生成,如果你是动态添加的轮播模块!)

    接着swipe实例对象初始化配置:



    如果你是动态生成的轮播模块,就添加上红色圈出来的部分,反之则不用



    还有个关键的地方,这个插件在手指滑动过一次slide模块后就会stop了,不会再自动轮播,这时候需要到swipe.js里去修改一下源码:


    这样这个插件基本就能正常运行满足你最基本的需求。


    展开全文
  • 移动端h5如何使用轮播插件swipe发布时间:2020-07-16 15:36:34来源:亿速云阅读:100作者:Leah本篇文章为大家展示了移动端h5如何使用轮播插件swipe,代码简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的...

    移动端h5如何使用轮播插件swipe

    发布时间:2020-07-16 15:36:34

    来源:亿速云

    阅读:100

    作者:Leah

    本篇文章为大家展示了移动端h5如何使用轮播插件swipe,代码简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

    swipe.js是一个轻量级js触摸滑动类库 – Swipe JS。这是一个非常小的一个javascript类库,但他的功能却不简单,它可以用来展示web页面上的任何内容,支持精确的触摸移动操作,而且还可以设置自动播放、等比例缩放等等实用性的功能。

    在移动端的h6页面里,我们经常会有轮播图的需求,如果不需要太多的效果,只是简单的手指滑动和自动轮换效果的话,我比较推荐swipe插件,不过百度搜索到的这个插件,里面介绍的不是很完整,我给大家补充下可能需要的功能。

    Swipe函数介绍

    下面就为大家介绍下Swipe JS的使用方法,Swipe有以下几个参数:startSlide: 4, //起始图片切换的索引位置

    auto: 3000, //设置自动切换时间,单位毫秒

    continuous: true, //无限循环的图片切换效果

    disableScroll: true, //阻止由于触摸而滚动屏幕

    stopPropagation: false, //停止滑动事件

    callback: function(index, element) {}, //回调函数,切换时触发

    transitionEnd: function(index, element) {} //回调函数,切换结束调用该函数。

    除此之外,还有一些比较常用的API方法,例如:prev():上一页

    next():下一页

    getPos():获取当前页的索引

    getNumSlides():获取所有项的个数

    slide(index, duration):滑动方法

    Swipe使用方法

    了解基本函数方法后,我们就来看看使用方法。

    首先是HTML结构:

    然后是样式代码:.swipe {

    overflow: hidden;

    visibility: hidden;

    position: relative;

    }

    .swipe-wrap {

    overflow: hidden;

    position: relative;

    }

    .swipe-wrap > figure {

    float: left;

    width: 100%;

    position: relative;

    }

    最后设置JS绑定以及参数设置:var slider = Swipe(document.getElementById('slider'), {

    …………

    …………

    });

    在这里只要把上面介绍的函数参数写在里面,就可以实现相对应的功能。

    最后我们也可以给滑动切换添加上下按钮:prev

    next

    另外我进行一些分页器效果的补充吧:

    如果需要分页那个点的效果的话,可以这么添加代码:

    nav标签部分就是分页器的相关部分拉,多少个slide就多少个li标签(如果需要分页器效果的童鞋就添加一个nav和ul标签即可,因为代表分页点的li标签需要动态生成,如果你是动态添加的轮播模块!)

    对应的实例化代码(有更简化写法的童鞋可以用自己的方法):var slider = Swipe(document.getElementById('slider'), {

    auto: 3000,

    continuous: true,

    callback: function(pos) {

    var i = bullets.length;

    while (i--) {

    bullets[i].className = ' ';

    }

    bullets[pos].className = 'on';

    }

    });

    var slides = document.querySelectorAll('.swipe-wrap figure').length;

    var liBox = document.getElementById('position');

    var liTab;

    for (var i = 0; i < slides; i++) {

    liTab = document.createElement('li');

    if (i == 0) {

    liTab.className = 'on';

    }

    liBox.appendChild(liTab);

    };

    var bullets = document.getElementById('position').getElementsByTagName('li');

    还有个关键的地方,这个插件在手指滑动过一次slide模块后就会stop了,不会再自动轮播,这时候需要到swipe.js里去修改一下源码:

    这样这个插件基本就能正常运行满足你最基本的需求了。

    上述内容就是移动端h5如何使用轮播插件swipe,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注亿速云行业资讯频道。

    展开全文
  • 移动端H5轮播图,可以手动、自动左右切换,无限循环,无缝轮播,可指定切换频率,自动切换方向。
  • 采用h5中classList切换类的方式实现底部小圆圈同步变化效果 移动端touch触屏事件 效果预览 实现代码 html <!-- 轮播图--> <div class="focus"> <ul> <li><img src="../imgs/OIP....
  • H5移动端适配

    千次阅读 2016-08-17 15:23:39
    本文转载-----------移动端H5页面之iphone6的适配(Hugo web前端开发) iphone6 及 iphone 6 plus 已经出来一段时间了。很多移动端网站,以前写死body 为320px的,现在估计也忙着做适配了。 大屏幕手机...
  • H5手机移动端开发常用资源整合

    千次阅读 2017-03-12 21:09:14
    移动端开发中需要考虑的问题比较多,常见的资源以及移动端需要注意的地方整理出来了,这是篇转载的文章,写的比较全面,分享给大家。
  • H5移动端开发

    2018-08-17 07:15:00
    开发前准备 环境: Node.js LTS版本 git 最新版 文档: 本项目技术栈基于 ES2016 VueJS vux 快速开始 1.克隆项目 ... git clone https://gitee.com/Fntys/met_h5.git ... cd met_h5 3.安装依赖 npm i...
  • border-spacing:0 } td,th { padding:0 } /*轮播块*/ .Banner { width:100%; position:relative; } .Banner .B-img { width:100%; overflow:hidden; } .Banner .B-img ul { width:1000%; } .Banner .B-img ul li { ...
  • 移动端滑动轮播图

    2018-06-08 10:26:36
    基于zepto的移动端轮播图插件,滑动时中间图片变大。两侧图片缩小
  • H5轮播图简版

    千次阅读 2017-08-15 16:00:07
    html> html> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> meta http-equiv="X-UA-Compatible" content="ie=edge"> title>H5轮播title>
  • H5-C3-移动端布局

    2020-03-08 22:55:36
    timeupdate 播放时-持续触发 volume 音量大小 source标签 可以通过在多媒体标签内加入source标签,用来指定多个播放路径,当第一个source标签的路径出错时,自动会切换到第二个source标签 <video > ...
  • H5 移动端 测试方法

    万次阅读 多人点赞 2018-09-17 11:16:40
    H5与Native切换切换时登录信息是否记录、流程是否顺畅、是否出现中断闪退等问题。 注意验证 登录信息是否能互通。 不能出现native已经登录,进入h5后继续让登录,实在技术实现不了的可toast提示用户继续登录。 ...
  • 移动端触屏滑动的效果的效果在电子设备上已经被应用的越来越广泛,类似于PC端的图片轮播,但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指。 以下是...
  • 移动端轮播图

    2019-10-12 18:53:47
    移动端轮播图的实现可以直接使用h5的属性和方法来实现,另外内核也只兼容webkit即可 页面基本结构 <div class="jd_banner"> <ul class="clearfix"> <li><a href="#"><img src...
  • H5 移动端 测试方法 置顶2018年09月17日 11:16:40wjw290313631阅读数:2162 一.功能测试 1、关注页面请求。对于每个页面,要查看发送的请求是否正确,请求的接口是否有重复,接口请求是否正确...
  • h5移动端注意事项

    2019-04-16 14:52:44
     适合上下滑屏、左右滑屏等滑屏切换页面的效果    slip.js     iSlider.js     fullpage.js     swiper   3.瀑布流框架    masonry   工具推荐    caniuse  各浏览器支持html5属性查询  ...
  • 1、苹果UC浏览器,会把我的首页轮播图当做广告拦截了,闪现一下后变空白,图片看不到了。 2、华为默认安卓浏览器,会把我的广告弹窗当做广告屏蔽了,不让弹,也不让点开。 虽然,哪怕他们的确是广告,作为用户,是不...
  • 之前做了一个h5项目,核心功能是上传图片,进行裁剪后与其他页面部分合成到一个图片作为海报进行保存。实际做出来的功能如下所示,这里我是用pc浏览器的移动端页面模拟进行录制的,实际上在手机上的效果会更好一点:...
  • H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 忽略将页面中的数字识别为...
  • 移动端带swiper轮播图

    2020-10-01 23:22:16
    移动端带swiper轮播图1效果图2项目简介下载地址 1效果图 2项目简介 ①带有swiper轮播图插件 ②移动端自适应 ③运用less 下载地址 百度云永久免费下载链接 提取码: h5ur

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,758
精华内容 1,903
关键字:

h5轮播图移动端