首页
学习
活动
专区
工具
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.2K11

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

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

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

    移动开发实用

    通常我们再滑屏页面,会调用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.7K20

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

    /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天内以开发者自定义比例,向信用户发布更新 详情见知乎:发布小程序时选择全量发布和分阶段发布是什么意思?...总结 在开发这个小程序时,信小程序只支持页面级开发,如今小程序已支持组件开发和插件开发。

    89431

    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.3K140

    移动端问题收集和解决

    事件 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

    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.6K20

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

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

    4.1K70

    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

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

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

    69350

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

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

    88350

    📚一站式解决: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%;

    57620

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

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

    65940

    几个经常在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,这表明他们的策略是有效的。

    42510

    CSS 基础 之 基础选择器+字体文本相关样式

    CSS 初体验 2、CSS引入方式 2.1 内嵌式 2.2 外联式 2.3 行内式 3、基础选择器 3.1 标签选择器 3.2 类选择器 3.3 id选择器 3.4 通配符选择器 4、字体样式 4.1 字体大小...1.3 CSS 初体验 我们先来认识一下CSS 常见的属性: CSS 常见属性 作用 color 文字颜色 font-size 字体大小 background-color 背景颜色 width 宽度 height...doctype html> <meta http-equiv="X-UA-Compatible"...4.2 字体粗细 属性名 font-weight 取值 关键字: 正常——>normal 加粗 ——>bold纯数字:100~900的百数:正常——>400 加粗 ——>700 注意点 不是所有字体都提供了九种粗细...关键字: 正常——>normal 加粗 ——>bold 纯数字:100~900的百数:正常——>400 加粗 ——>700 注意点 不是所有字体都提供了九种粗细,因此部分取值页面中无变化 实际开发中以

    2.1K10
    领券