首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

H5 项目实用

font-family:Helvetica; 移动端如何定义字体font-family @ ————————————–中文字体的英文名称 @ 宋体 SimSun @ 黑体 SimHei @ 微信雅黑...webkit-input-placeholder{ color:#999; } // android上去掉语音输入按钮 input::-webkit-input-speech-button {display: none} // 阻止...下默认触摸事件事件使用e.preventDefault是无效的,可通过样式来禁用,如:*/ html { -ms-touch-action:none; } //禁止winphone默认触摸事件 // 阻止...---- 34、微信浏览器用户调整字体大小后页面矬了,怎么阻止用户调整 //以下代码可使Android机页面不再受用户字体缩放强制改变大小,但是会有1S左右延时,期间可以考虑loading来处理 if...alert(JSON.stringify(res)); }) }, 0) } //IOS下可使用 -webkit-text-size-adjust禁止用户调整字体大小

5.3K11

什么是移动端开发【重点学习系列—干货十足–一万字详解】

CSS 像素不能直接跟现实中的长度单位换算 CSS 像素主要用在 CSS 与 JS 中控制元素的大小 位图像素 位图像素也是一个长度单位。...如何阻止默认行为 可以给 document 绑定 touchstart 事件,并阻止默认行为,不过需要关闭被动模式。这里推荐创建一个包裹元素,绑定 touchstart 事件并阻止默认行为。...CSS 代码 HTML 代码 JS 代码 后遗症 最外层元素阻止了 touchstart 默认行为之后,会产生一些意外现象 链接失效 内容无法选择 form 元素无法获得焦点 灵丹妙药 产生...而且两个都是相对长度单位,不过两个有点区别 em 相对的是父级元素的字体大小 rem 相对的是根元素的字体大小 核心是等比缩放 rem 适配的策略有以下几种 方法一 先按照 IPhone 6 进行页面布局...完美视口设置 通过 JS 设置页面的根元素字体大小。

2.6K21
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    移动开发实用

    通常我们再滑屏页面,会调用event的preventDefault()可以阻止默认情况的发生:阻止页面滚动 touchend 当手指离开屏幕时触发 touchcancel 系统停止跟踪触摸时候会触发。...通常我们再滑屏页面,会调用css的html{-ms-touch-action: none;}可以阻止默认情况的发生:阻止页面滚动MSPointerUp——当手指离开屏幕时触发 移动端click屏幕产生...type=file accept="video/*"> 使用总结: ios 有拍照、录像、选取本地图片功能 部分android只有选取本地图片功能 winphone不支持 input控件默认外观丑陋 微信浏览器用户调整字体大小后页面矬了...,怎么阻止用户调整 原因 anroid侧是复写了layoutinflater 对textview做了统一处理 ios侧是修改了body.style.webkitTextSizeAdjust值 普通解决方案...,暂无完美方案 参考 《移动端web页面使用position:fixed问题总结》 《使用iScroll.js解决ios4下不支持position:fixed的问题》 如何阻止windows Phone

    6.5K30

    为什么你永远不应该在CSS中使用px来设置字体大小

    本文首发于微信公众号:大迁世界, 我的微信:qq449245884,我会第一时间和你分享前端行业趋势,学习途径等等。...但现在它指的是当前字体大小,而不是特定字形的尺寸。 EM 和 REM 之间的区别 为了区分这两者: 1rem 始终等于浏览器的字体大小,或者更准确地说是 html 元素的字体大小。...总结一下: 1em 是当前元素的字体大小。 1rem (根em)是文档的字体大小(即浏览器的字体大小)。 好的,那就是单位的含义和来源。现在让我们回答为什么使用哪个单位很重要。...它是不可访问的,甚至可能会阻止某人完全使用该网站。 因此,虽然可能存在一些有效的用例来解释这种行为,但它绝对不是你想要的默认行为。...我们知道当用户调整字体大小时 px 值不会改变,这意味着像素单位实际上是某些美学元素的不错选择。也许我们有一定的间距,我们不希望在字体大小变大时变得更大。

    1.8K20

    基于后端云的吉他谱小程序开发

    /swiper> 获取id: //事件处理函数 navigateToDetail: function (e) { const id = e.currentTarget.dataset.id; } 阻止事件冒泡...bindtap、bindlongtap、bindtouchstart、bindtouchmove、bindtouchend、bindtouchcancle 对应阻止冒泡事件将bind用catch替代.../promisify.js') const request = promisify(wx.request); request({ url: 'some URL' method: 'GET...全量发布:即时向全量微信用户发布新版小程序。 分阶段发布:新版小程序将在15天内以开发者自定义比例,向微信用户发布更新 详情见知乎:发布小程序时选择全量发布和分阶段发布是什么意思?...总结 在开发这个小程序时,微信小程序只支持页面级开发,如今小程序已支持组件开发和插件开发。

    92731

    H5页面适配及微信默认字号问题的最佳实践

    H5页面适配及微信默认字号问题的最佳实践 Write By CS逍遥剑仙 我的主页: csxiaoyao.com GitHub: github.com/csxiaoyaojianxian Email:...csxiaoyao.com QQ: 1724338257 1. css 中的单位 1.1 基于像素 px 最常用的 绝对单位,按精确像素计算 1.2 基于字号 em / rem em 是 相对单位,基准为父节点字体大小...取视窗宽高二者中较小 / 大值的百分比进行计算 /* 元素始终在屏幕上可见 */ .box { width: 100vmin; height: 100vmin; } /* 元素始终铺满整屏...使用 rem 进行移动端页面适配 移动端适配最简单的是通过js动态计算 viewport 的缩放值,但过于粗暴,会导致页面图片文字失真模糊。...解决微信等第三方App的默认字号问题 微信等 App 内可以设置默认字号,若用户修改了默认文字大小,会给上述的适配造成困扰,解决方法是先获取 App 的原始缩放比例,再在此基础上计算 font-size

    3.6K140

    移动端问题收集和解决

    事件 2、使用fastclick库,会把click的300ms延迟干掉 3、自己封装tap事件,使用touchstart、touchend、touchmove事件,e.preventEvent()将事件阻止...*设置内嵌的元素在 3D 空间如何呈现:保留 3D*/ -webkit-backface-visibility: hidden; /*(设置进行转换的元素的背面在面对用户时是否可见:隐藏)*/ IOS字体大小重置...问题描述 iOS 与 OS X 端字体的优化(横竖屏会出现字体加粗不一致等) iOS 浏览器横屏时会重置字体大小,设置 text-size-adjust 为 none 可以解决 iOS 上的问题,但桌面版...do(event.target); event.returnValue = false; } }); 移动端input文字输入-emoji表情输入 问题描述 当输入emoji表情的时候,js...这里可以使用setInterval监听,当当前window.innerHeight和整屏高度相等的时候判断为键盘收起。

    1.9K20

    微信公众号可通过现金红包接口发放微信支付现金红包(附开发教程)

    1、商户调用接口时,通过指定发送对象以及发送金额的方式发放红包,这样的方式,允许商户灵活的应用于各种各样丰富的活动场景   2、领取到红包后,用户的资金直接进入微信零钱,避免繁复的领奖流程,带给用户微信支付原生的流畅体验...  简介   春节期间,微信红包以其独特的魅力,优秀的用户体验和安全的支付环境,一经推出即受到了广大用户的热烈欢迎,现微信支付现金红包向微信支付商户开放   微信红包发送规则   1....微信支付商户号会在商户申请微信支付成功后,通过开户邮件发送给您。请不要使用微信公众平台账号或者appid登录。...如果您登录时遇到问题,请联系微信支付小助手weixinpay@tencent.com    ◆ 下载证书   商户调用微信红包接口时,服务器会进行证书验证,请在商户平台下载证书    ◆ 充值   发放现金红包将扣除商户的可用余额...,拆红包   接口详细说明   1.红包发放说明   用于企业向微信用户个人发现金红包   目前支持向指定微信用户的openid发放指定金额红包。

    4.2K70

    rem适配移动端的原理及应用场景

    ,相对于根元素字体大小;rem作用于根元素字体大小时,相对于其出初始字体大小——MDN 比如根元素(html)设置font-size=12px; 非根元素设置width:2rem;则换成px表示就是24px...375px,font-size:37.5px; html {fons-size: width / 10} div {width: 5rem} /* 5rem = 5a = 屏幕宽度的50% */ 我们用js...字体并不合适使用rem, 字体的大小和字体宽度,并不成线性关系,所以字体大小不能使用rem;由于设置了根元素字体的大小,会影响所有没有设置字体大小的元素,因为字体大小是会继承的,难道要每个元素都显示设置字体大小...: width / 10} body {font-size: 16px} 那字体咋整?...五、rem布局方案 从上可以看出最好的弹性布局方案就是rem+js的方案,《Flexible实现手淘H5页面的终端适配》就是采用rem+js实现的。flexible主要做了几点。

    1.7K20

    开发 | 教你刷爆朋友圈:2 招搞定小程序生成分享图片功能

    主要思路 用户操作的流程为:根据微信头像和自定义的祝福语,选择好一个祝福语模板,点击确定,即可进行祝福语图片的生成。...首先,通过知晓云(cloud.minapp.com),存储祝福语模板的数据和图片文件,并获取微信用户的相关信息,用于后续绘制工作。...登录成功之后,BaaS JS SDK 会自动将用户的个人信息存储到小程序中,使用同步方法 wx.BaaS.storage.get('userinfo') 即可获取。...绘制的过程,调用 wx.createCanvasContent(canvasID) 获取画布的上下文 ctx,依次完成绘制背景、祝福语的内容、微信用户头像和昵称、祝福人数等信息的逻辑。...确定好要绘制的单行文本之后,使用 wx.setFontSize 和 wx.setTextAlign 分别设置字体大小和字体对齐方式。

    73250

    2017移动前端的一些总结web前端 —— 移动端知识的一些总结一.css部分二.js部分

    ,比如 center 10px left(暂时兼容性差) 19.使用 rem布局时,由于 webkit支持的最小字体大小是 12px,所以使用 html使用 62.5%实际是 12px,这样很难计算,我的做法是设置成...用 css3的 blur效果的话,是整层元素全部模糊,而透过模糊层看其他的元素不模糊 23.如果需要展示小于 12px的文字,用 transform:scale(%);它将元素缩小,但本身应该占的空间并不会变小...点击黑色半透明区域弹出层消失,这种可以在黑色区域绑定 touchend也是和 tap差不多的效果 7.当弹窗出现时,想禁止屏幕的滑动,给那个遮罩层添加 touchmove事件即可,用 e.preventDefault()会阻止的...4.微信 jssdk里预览图片接口,图片的 url不能填 base64编码, ios上会很卡,估摸着微信得卡个 5秒左右才打得开,而 android上压跟就卡住或者一直卡在读取图片界面 5.微信当在输入框里输入消息时...要设置 cache:false(iphone、android的某些手机都可能出现) 7.在微信 js config的时候,如果 URL的参数有如 ?a={"param": "1"},会导致签名失败。

    3.7K40

    📚一站式解决:H5开发全攻略,看这篇让你省时又省力

    element { user-select: none; -webkit-touch-callout: none; } ⭐️⭐️禁止字体调整 通过设置text-size-adjust: 100%属性,可以阻止用户在旋转屏幕时浏览器自动调整字体大小...原因 键盘不能回落问题出现在 iOS 12+ 和 wechat 6.7.4+ 中,而在微信 H5 开发中是比较常见的 Bug。 ...导致初始化微信 SDK 时传入的分享 url 和用户实际触发分享操作时页面的 url 不一致,致使在 iOS 上分享失败。...解决方案 初始化微信分享 SDK 时传入的地址,和实际触发分享时页面的地址保持一致。...body { background-color: #fff; } ⭐️⭐️旋转屏幕的时候,字体大小调整的问题 css body { -webkit-text-size-adjust: 100%;

    90521

    微信跨境支付落地英国 伦敦华埠部分商户开始试运营

    微信支付全球合作伙伴StarPay宣布自本月起,微信跨境支付正式落地英国,为关联有中国银行卡的微信用户提供英国本地微信支付服务。自此,中国消费者在英国可以使用微信扫描商家二维码实现无卡消费。...本月初,StarPay通过英国本地银行及保险清算公司Vitese的清算网关,正式完成了微信支付与英国本地全部银行系统的对接工作。最近两周,微信支付开始在伦敦唐人街个别商户调通试运营。...据悉,首批接入StarPay微信支付的英国商户在“微信支付•圣诞狂欢季”(2017年12月16日-2018年1月15日)将享受微信支付为中国消费者送上的返现优惠—消费金额满50元随机立减最高可达188元...微信支付是基于微信社交平台的移动支付产品,自2013年推出以来,迅速成为最受欢迎的移动支付工具之一。...据微信官方信息,目前微信活跃用户达9亿,支持十几种外币直接结算,截止2017年3月微信支付日交易笔数已经超过6亿笔。

    90450

    前端实现项目中px自动转换rem

    “好事”文章:《掌握微信小程序开发的核心要点:从基础到进阶》文章地址:https://cloud.tencent.com/developer/article/2472716好文介绍:好文通过5个核心要点...,讲解了如何掌握微信小程序开发从基础到进阶。...rem 单位是相对于根元素(html 元素)的字体大小进行计算的,所以需要先确定根元素的字体大小。2....具体步骤步骤一:定义根元素字体大小变量undefined在项目的全局 Sass 文件(例如 styles.scss)开头,定义一个表示根元素字体大小的变量,通常浏览器默认根元素字体大小是 16px,你可以根据实际设计稿进行调整...步骤二:配置 px 转 rem 的相关参数undefined在 vue.config.js 文件中添加如下配置代码,示例如下(这里同样假设根元素字体大小设置为 16px,你可以根据实际情况调整):module.exports

    20010

    可能是效果最像的微信复刻项目

    大家好,我是TJ 一个励志推荐10000款开源项目与工具的程序员 微信已经成为大家平常生活中离不开的一个工具,今天TJ君就给大家分享一个可能是效果最像的微信复刻项目 TLChat TLChat,使用iOSAppTemplate...让我们一起来看看这些效果截图: 这跟微信有什么区别呢?简直就是一毛一样好不好!如果不告诉你你是不是就会觉得这是真实微信截图?...能达到这么像的效果,还是要从完成度来说,目前TLChat已经完成了大多数微信常用功能的实现,我们可以从5大模块来了解下: 消息界面 这个可能是大家使用微信用到最多看的最多的界面了,可以用的功能包括从消息列表的展示...我界面 对自己的各种信息设置、表情的管理下载、整体的使用设置(字体大小、聊天背景、清空记录、使用空间管理等) 聊天界面 除了上述最大模块,还有一个就是具体的聊天界面了,包括如何从输入框输入信息(文字信息...想自己写个微信出来的小伙伴,赶紧来研究下这款项目吧

    70240

    小程序的UIUX设计与优化

    小程序的UI/UX设计与优化一、引言微信小程序是基于微信生态的应用程序,其界面和交互设计(UI/UX设计)直接影响用户体验。...案例: 电商小程序中的支付流程可以通过微信支付SDK的集成,允许用户直接通过微信账户支付,减少了输入支付信息的繁琐步骤,提升了支付的流畅性。...合理的对比度、字体大小、颜色搭配能够引导用户的视觉焦点。 案例: 在电商小程序的商品详情页,商品价格、销量等关键信息应放在显眼的位置,并使用大号字体。...四、UX设计优化中的用户调研与测试 用户调研 在进行小程序的UI/UX设计时,首先需要了解目标用户的需求。可以通过问卷调查、用户访谈等方式收集用户反馈,了解他们的使用习惯和痛点。...六、推荐参考文章微信小程序UI设计规范小程序用户体验设计与优化实践小程序性能优化最佳实践设计的力量:如何优化小程序的UI/UX设计通过这些资源,你可以进一步深入了解小程序UI/UX设计的方方面面,掌握更多优化技巧

    17400

    几个经常在H5移动端开发遇到的东西!

    注意事项: 唤醒APP的条件是你的手机已经安装了该APP 某些浏览器会禁用此协议,比如微信内部浏览器(除非开了白名单) ? 后面应该会专门写一篇文章用来探讨唤醒APP? 4....一般出现在IOS设备中的微信内部浏览器,出现的条件为: 页面高度过小 聚焦时,页面需要往上移动的时候 所以一般input在页面上方或者顶部都不会出现无法回弹?...屏幕旋转为横屏时,字体大小会变 具体出现的情况不明?,有时候有有时候没有,欢迎指出。 优化代码: * { -webkit-text-size-adjust: 100%; } 9....最简单的rem自适应 大家都知道,rem的值是根据根元素的字体大小相对计算的,但是我们每个设备的大小不一样,所以根元素的字体大小要动态设置?...event.preventDefault(); }); 如果在vue中,你可以这么写: 如果.content也有滚动条,那么只要阻止遮罩本身就行

    1.2K20

    资讯 | 2017中国互联网百强榜单揭晓;微信更换小程序入口

    2 微信把小程序的新入口放在了微信群中 安装了微信最新版的安卓用户,打开一个微信群,点击右上角的人头按钮,在“聊天信息”页面,会发现这个新入口,“群小程序”。...点击进入,就能看到好友在微信群里分享过的小程序了。而且,还会显示小程序的分享者和分享时间。目前,“群小程序”页面中最多只展示新分享到群里的 10 个小程序,暂时还未加入“星标”置顶功能。...7 Node.js 2017企业用户调查结果发布 Node.js基金会发布了2017年用户调查结果。该调查显示,企业用户对Node.js的兴趣与日俱增。...从2016年11月30日到2017年1月16日,有超过1400名开发人员和管理人员参与了此次在线调查,该调查的目标是“分析Node.js用户”和“发现可能的改进领域”。...Node.js基金会技术指导委员会负责人James Snell告诉InfoQ,这表明他们的策略是有效的。

    43210
    领券