移动端H5

移动端H5页面-微信内浏览器软键盘弹起input失焦后不回弹

场景：IOS微信内置浏览器在打开H5页面的时候，input输入时软键盘弹起，页面会被顶起来，软键盘收起的时候页面不回弹出现的条件为：页面高度过小&&聚焦时，页面需要往上移动的时候解决：（以vantUI的输入框为例）给输入框添加一个失去焦点的事件//解决微信端页面被顶起temporaryRepair(){letcurrentPosition,timer;letspeed=1;//页面滚动距离time
你好！YOYO·2020-08-22 10:16

移动端原生JS实现手指跟随的触控滑动

移动端H5页面的触控触发事件在我之前的一篇博客中写了挺多.原博地址原生JS实现触控滑动（swipe）图片轮播（里面大致罗列了HTML5中touch事件
囧囧·2020-08-22 09:22

玩转HTML5移动页面

同时也会谈及移动端H5页面的优化细节与关键点，因此本文章将分为动效篇和优化篇。====前方高能====（1）CSS3时序错开渐显动画这是一种比较常用的动画，它的优点是节
weixin_34248705·2020-08-21 22:46

vue实现移动端H5数字键盘组件使用详解

本文实例为大家分享了vue实现移动端H5数字键盘组件的使用代码，供大家参考，具体内容如下我们平时扫码付款的时候，经常会输入一些数字进行付款，仔细看了下键盘和系统的键盘有点不一样，于是今天买甘蔗的时候扫码付款就想了一下要怎么去实现一个
·2020-08-21 19:58

rem移动端适配时 pc端也要能够正常显示

rem移动端适配下可能会出现这种情况，即，由于移动端h5我们通过js设置了html的font-size会根据dpr（设备像素比）大小而自适应变化，但是pc端的font-size固定是12px这时就可能会出现
hzxOnlineOk·2020-08-21 14:05

关于rem的计算的坑

如下图所示，我们需要做一个分割线，这是一个移动端h5的页面，需要做rem适配，分割线样式如下：.split_line{display:inline-block;width:0.02rem;height:
hzxOnlineOk·2020-08-21 14:04

移动端H5拉起手机相机

移动端H5拉起手机相机目前浏览器拉起手机相机的有两种方式MediaDevices.getUserMedia()和使用input标签input标签拉起相机只要正确的配置accept和capture就可以打开手机相册
weixin_34255793·2020-08-21 06:19

移动端H5 QQ在线客服链接代码

移动端H5QQ在线客服链接代码ahref="mqqwpa://im/chat?chat_type=wpa&uin=2679571084&version=1&src_t
一枪尽骚丶魂·2020-08-21 05:24

移动端H5开发遇到的问题及解决方法

本篇文章给大家带来的内容是关于移动端H5开发遇到的问题及解决方法，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
a676465927·2020-08-21 03:47

vue实现移动端H5页面截图【html2canvas、domtoimage】

开发vue项目最近遇到需要截图实现页面分享，刚开始毫无头绪，H5页面如何实现截图，查阅一些资料，推荐html2canvas、domtoimage这两款组件，接下来演示一下这两款组件的使用。1.html2canvas1）html2canvas能够实现在用户浏览器端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个Canvas图片，通过读取DOM并将不同的样式应用到这些元素
Jello·2020-08-20 22:44

vue实现移动端H5页面截图【html2canvas、domtoimage】

开发vue项目最近遇到需要截图实现页面分享，刚开始毫无头绪，H5页面如何实现截图，查阅一些资料，推荐html2canvas、domtoimage这两款组件，接下来演示一下这两款组件的使用。1.html2canvas1）html2canvas能够实现在用户浏览器端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个Canvas图片，通过读取DOM并将不同的样式应用到这些元素
Jello·2020-08-20 22:43

移动端h5监听键盘弹出和收起

在ios中软键盘弹起时，仅会引起$('body').scrollTop值改变，但是我们可以通过输入框的获取焦点情况来做判断，但也只能在ios中采用这个方案，因为在android中存在主动收起键盘后，但输入框并没有失焦，而ios中键盘收起后就会失焦；在android中软键盘弹起或收起时，会改变window的高度，因此监听window的onresize事件；一、Android端监听//获取原窗口的高度
艾欢欢·2020-08-20 22:33

移动端h5监听键盘弹出和收起

在ios中软键盘弹起时，仅会引起$('body').scrollTop值改变，但是我们可以通过输入框的获取焦点情况来做判断，但也只能在ios中采用这个方案，因为在android中存在主动收起键盘后，但输入框并没有失焦，而ios中键盘收起后就会失焦；在android中软键盘弹起或收起时，会改变window的高度，因此监听window的onresize事件；一、Android端监听//获取原窗口的高度
艾欢欢·2020-08-20 22:33

Css-移动端适配总结

前言工作以后，大部分的业务工作都是基于移动端H5的，开发过程中学习了很多东西，遇到过许多问题，诸如rememcsspxdevicepx等，本文纯属个人的归纳总结，如有问题，请指出亲喷~PC端本文主要是讲解移动端的响应式布局
菜的黑人牙膏·2020-08-20 21:59

Css-移动端适配总结

前言工作以后，大部分的业务工作都是基于移动端H5的，开发过程中学习了很多东西，遇到过许多问题，诸如rememcsspxdevicepx等，本文纯属个人的归纳总结，如有问题，请指出亲喷~PC端本文主要是讲解移动端的响应式布局
菜的黑人牙膏·2020-08-20 21:59

移动端H5页面调用多摄像头拍摄图像

demo打开/切换摄像头关闭摄像头拍照//访问用户媒体设备的兼容方法functiongetUserMedia(constraints,success,error){if(navigator.mediaDevices.getUserMedia){//最新的标准APInavigator.mediaDevices.getUserMedia(constraints).then(success).catch
西瓜很快·2020-08-20 13:59

解决ios下滑动引起webview整体滚动

后面继续开发中发现次方案只能解决首次手势问题，比如手指一直没离开屏幕而先向上又向下依然会出现弹性滚动，在移动过程中不能中断，目前没找到更好的办法解决方案1：在移动端h5中我们可以监听touchstart
RowanIT3·2020-08-19 16:40

web疑难杂症

很明显这样咩有头，只会不停的得不偿失，于是想了想还是静心下来，我们从最基本的开始，解决疑难杂症巩固好基础才能更快的上手或者说更好的去开发，找到合适于项目的技术栈才是最重要的关于移动端H5之单位关
前端小学生CBB·2020-08-19 00:43

我的React前端工程化模板&组件库

react-template-easilyDesc：react-template-easily是一套以react技术搭建的项目模板，适用于移动端H5,webapp和hybirdApp开发。
Jason-Jin·2020-08-18 20:42

python+Django+移动端H5网页接入支付宝支付全流程

前言:本文主要向大家介绍python做后台的移动端H5接入支付宝支付的全部流程,所有步骤经过本人测试近期公司项目临近尾声,需要接入支付宝支付功能,公司项目是一个移动端的网页项目,后台用的是Django,
大梦_damon·2020-08-18 06:31

妙味课堂H5音乐播放器实战视频课程 ajax实战教程

课程介绍：本次课程涉及的知识点包括移动端H5、CSS3、JS、滑屏、HTTP协议、AJAX、跨域、前后端交互、PHP、mySql、jQuery……配合这些知识点，讲师写了一个H5播放器demo，用来演示一个
weixin_38381610·2020-08-18 05:50

移动端开发兼容问题

移动端h5开发遇到的兼容问题ios兼容问题高版本兼容时间格式兼容ios执行document.execCommand("copy")不生效input框ios将数字当成电话。
The_upside_of_down·2020-08-17 20:28

解决ios中的onclick失效的问题

前段时间笔者跟同事一起开发移动端H5界面,后来在测试时,发现一些界面的onclick事件在苹果ios上不管用,因为笔者跟同事之前一直做PC端开发,不太清楚怎么回事,于是在网上找到如下几种方案:一.修改css
Clara_G·2020-08-16 11:35

移动端H5界面 前端html app 自动清除引入的css js缓存方法

笔者近期在开发移动端h5界面,发现每次改完样式js都需要强制清除下手机浏览器的缓存,才显示效果,但是通过微信浏览器进行查看时没找到清除缓存的按钮,于是乎,自己上网上找了写方法,又在学习群里交流了下,总结出以下方法
Clara_G·2020-08-16 10:01

Vue 搭建移动端 h5 项目步骤

Vue搭建移动端h5项目步骤简介最近团队里的其他前端小伙伴需要自己搭建移动端h5项目，没有整体的思路，于是我就写了这个步骤。
xiao_fei_blog·2020-08-16 07:43

移动端H5 audio在ios中不能自动播放

最近的一个项目需要给页面加背景音乐，安卓中audio的autoplay属性可以自动播放，但是ios播放失败，在网上看了解决办法，记录一下，O(∩_∩)O~~。但是这个方法只有在微信中打开有效，浏览器中无效第一步、引入jweixin-1.0.0.js第二部、wx.config配置错误也没问题functionautoplay(){wx.config({debug:false,appId:'',time
purpleyou·2020-08-16 01:44

移动端H5页面开发坑点指南

前言在平时的H5移动端开发时，我们难免会遇到各种各样的坑点，这篇文章就带着大家来看看怎么解决，文章较长，建议收藏方便以后查阅！前方高能！canvas在retina屏模糊只需要将画笔根据像素比缩放即可run(canvasEl){constcanvas=canvasEl;constctx=canvas.getContext('2d');constdevicePixelRatio=window.devi
llhh33·2020-08-15 20:53

基于ionic+cordova+angularJs从零开始搭建自己的移动端H5 APP

这里详细介绍下如何用ionic+cordova+angularjs搭建自己的移动端app，包括环境搭建，框架使用等，具体项目已放置在github上，可下载下来自行启动。下载地址：https://github.com/foreverjiangting/myApp/tree/master/myApp一：环境搭建1.配置java的运行环境，包括path变量的路径，这里不再详细讲解，请自行百度。2.下载A
weixin_34177064·2020-08-15 20:05

移动端H5实现图片上传

效果图基础知识FormData通过FormData对象可以组装一组用XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据，因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data，则通过FormData传输的数据格式和表单通过submit()方法传输的数据格式相同。这是一种常见的移动端上传方式，FormData也是H5新增的兼容性如下：b
猜不到我是谁·2020-08-15 19:18

移动端上传照片 预览（解决iOS等设备照片旋转90度的bug）

背景：本人的一个移动端H5项目，需求如下:手机相册选取或拍摄照片后在页面上预览然后绘制在canvas画布上。
hsany330·2020-08-15 18:14

常见的移动端H5页面开发遇到的坑和解决办法

转过来，平时看看。虽然还有很多问题至今无解。比如：华为麒麟950的P8和meta打开我们的应用首页经常偶发白屏。！！1、安卓浏览器看背景图片，有些设备会模糊。用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone4的960640分辨率，在网页里只显
darling5679·2020-08-15 18:25

移动端H5网页“上中下布局”的另类实现思路

记得曾经做过这样的一个面试题，面试题要求如下：相册空间\硬盘空间的进度条,考虑百分比的控制；左中右三栏等高，整个页面的宽度不固定，左右宽度固定，中栏自宽度适应，论坛的文章标题也自适应宽；加“…”的地方，考虑过长溢出省略处理；假如这是一个访问PV达2000W/日，因成本限制，网络带宽可能满足不了此访问量，会出现滞连情况，样式文件可能加载不了，且中栏内容是最重要且要呈现在用户眼前的。(也就是说,在无样
weixin_30782331·2020-08-15 00:27

3分钟搞懂FastClick原理解析

为什么要用FastClick在移动端H5开发过程中，关于点触可能会遇到如下两个问题：手动点击与真正触发click事件会存在300ms的延迟点击穿透问题（点击行为会穿透元素触发非父子关系元素的事件）延迟的存在时因为浏览器想知道你是否在进行双击操作
Allan91·2020-08-14 22:36

vue移动端5页面根据屏幕适配的四种方案

在vue移动端h5页面当中，其中适配是经常会遇到的问题，这块主要有两个方法可以适用。方法一：引入淘宝开源的可伸缩布局方案引入淘宝开源的可伸缩布局方案：https://git
Ethanhuyi·2020-08-14 12:02

常见的移动端H5页面开发遇到的坑和解决办法

手机共通问题问题一:用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢?经研究发现是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显示网页字会非常小,所以苹果就把iPhone4的960640分辨率在网页里只显示了480320,这样devicePixelRatio＝2;现在android比较乱,有1.5/2/3等,想让图片在手机里显示更为清晰必须使用2x的背
weixin_34310785·2020-08-14 08:25

在移动端H5开发中(关于安卓端position:fixed和position:absolute；和虚拟键盘冲突的问题，以及解决方案)...

一、在开发移动端webapp时，我们经常会遇到这样的问题，当我们需要在页面底部固定一个logo或者说明时，往往会采用position：fixed进行固定定位或者absolute定位到最底部这是一个很常规的操作，但是当页面上有input输入框时，当用户点击输入的时候，虚拟键盘被拉起，会造成我们在底部定位的内容，被谈起，而遮挡我们的输入框，造成无法输入或者界面布局不美观像下面这样其实造成这种问题的原因
weixin_30381317·2020-08-14 06:23

iosselect移动端H5的picker插件（一到多级联动，时间日历插件）

1.详情参考：https://github.com/zhoushengmufc/iosselect2.效果（1）一级级联，银行选择（http://zhoushengfe.com/iosselect/demo/one/bank.html）（2）二级级联，三国杀将领组合选（http://zhoushengfe.com/iosselect/demo/two/sanguokill.html）（3）三级级联
hangGe0111·2020-08-13 14:49

vue开发移动端h5使用 lib-flexible移动端适配

在做h5的时候，考虑到移动端的适配问题，以及px像素的问题项目中使用lib-flexible一、项目中安装lib-flexiblenpminstalllib-flexible--save二、在项目的入口js文件中引入lib-flexibleimport'lib-flexible'三、修改index.html的mate属性-->my-firsth5使用px2rem-loader自动将css中的px转
cyclv·2020-08-12 00:21

产品夜话一：从产品角度是如何看待H5适配？

出于职业习惯，先将谈资发起的背景说明下：5月初，入职新公司，就在前几天揽下了个大活，对公司现有移动端H5产品进行全面的改版。
二十二克·2020-08-10 23:52

移动端H5页面顶部搜索栏悬浮

前言：在开发过程中，前端页面需要搜索信息，只有头部显示搜索框，想要搜索必须滑到顶部才能搜索。今天专门写个悬浮置顶的H5效果。1、前端html页面：2、js代码操作引用jquery:$(function(){//悬浮顶部搜索栏varheadHeight=500;//滑动高度可自行调节varnav=$(".top");$(window).scroll(function(){if($(this).scr
Jack_num1·2020-08-10 14:23

移动端H5页面之iphone6的适配

iphone6及iphone6plus已经出来一段时间了。很多移动端网站，以前写死body为320px的，现在估计也忙着做适配了。大屏幕手机其实一直有，只是以前大家没怎么重视，移动端的H5页面大部分都以320px为基准宽度进行布局，那些大屏屌丝android用户也懒得去理，而现在iphone也搞起多屏幕，老板们重视程度就不一样了。回归正题，兼容iphone各版本机型最佳的方式就是自适应。1、vie
weixin_34192732·2020-08-10 03:59

常见的移动端H5页面开发遇到的坑和解决办法

问题一:用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢?经研究发现是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显示网页字会非常小,所以苹果就把iPhone4的960640分辨率在网页里只显示了480320,这样devicePixelRatio＝2;现在android比较乱,有1.5/2/3等,想让图片在手机里显示更为清晰必须使用2x的背景图来代替i
weixin_33989780·2020-08-10 03:19

移动端自适应布局方案尝试

原文地址：移动端自适应布局方案尝试问题刚开始接触移动端H5页面的时候最困扰的几个问题是：6或6p上明明是1px的边框怎么就成了2px或3px辣么粗！
csdn产品小助手·2020-08-10 02:44

vuejs开发H5页面总结

vue移动端h5页面根据屏幕适配的四种方案关于布局方案当拿到设计师给的UI设计图，前端的首要任务就是布局和样式，相信这对于大部分前端工程师来说已经不是什么难题了。
前端库·2020-08-10 02:39

Js判断H5上下滑动方向及滑动到顶部和底部判断

昨天一位做移动端H5开发的同事说，H5滑动方向要实时判断向下还是向上，但判断是否滑动到底部时判断有问题一直没解决，于是就去问度娘，搜了很多资料，大部分有重复，于是根据大家的资料借鉴学习，在大家的基础上写了一个小例子
weixin_33905756·2020-08-09 14:15

vue-cli脚手架构建Vue项目及相关配置

Vue是移动端H5开发比较流行的一个MVVM框架，它是以数据驱动的，不需要像jQuery那样操作DOM，而是通过将DOM和数据绑定，利用Object.defineProperty中的setter/getter
小乔FEer·2020-08-09 10:03

优化Recorder H5录音：可边录边转码上传服务器，支持微信提供Android IOS Hybrid App源码

文章目录一、RecorderH5录音库的特性（1）浏览器支持（2）功能支持二、使用预览截图（1）移动端H5（2）IOSHybridApp（3）AndroidHybridApp三、应用场景四、优化过程记录
高坚果兄弟·2020-08-09 04:43

移动端H5，拍照，录制视频以及录音功能的调用

什么都不说，先上代码（原创）调用手机功能.btn{border-bottom:2pxsolid#fff;display:block;text-align:center;padding:2px10%;margin:2px0;}.btn:first-child{border-top:2pxsolid#fff;margin-top:20px;;}调用拍照调用视频调用录音//创建全局变量varoCache
云天1995·2020-08-09 03:03

移动端高清、多屏适配方案

移动端高清、多屏适配方案背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前，视觉MM会给我们一个psd文件，称之为视觉稿。
weixin_30343157·2020-08-08 23:34

H5调试工具spy-debugger使用方法

背景：web端h5可使用浏览器自带的工具进行页面样式布局等调试，但是移动端h5无法使用此方法。应用场景：移动端H5测试，Android/ios/ipad。
O型钢牙喵·2020-08-08 20:04
上一页 2 3 4 5 6 7 8 9 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他