移动端
文章平均质量分 78
移动端
花铛
这个作者很懒,什么都没留下…
展开
-
适配 IOS 安全区域
在开发时,需要对顶部和底部预留一点空间,防止页面的内容被这些元素遮挡。在 iOS11 新增的特性中,Webkit 包含了两个新的函数和四个预定义的常量用来适配 IOS 的安全区域。安全区域指的是一个可视窗口范围,处于安全区域的内容不受圆角(corners)、齐刘海(sensor housing)、小黑条(Home Indicator)影响。造成这个问题的主要原因就是 iphoneX 之后在屏幕上出现了所谓的刘海屏,而且在屏幕下方加了一条小黑条。原创 2024-01-11 15:36:51 · 1165 阅读 · 0 评论 -
《六》移动端性能优化
性能就是页面的响应速度。优化性能就是提升页面的响应速度。性能优化在PC 端和移动端都适用。与 PC 端相比,移动端网络速度慢,设备性能低,同一份代码,可能在 PC 端没有性能问题,但是在移动端就会有性能问题。所以相比 PC 端,移动端更需要性能优化。原创 2022-10-12 13:47:50 · 757 阅读 · 0 评论 -
《四》移动端事件
由于pointerover、pointerout 支持事件冒泡,pointerenter、pointerleave 不支持事件冒泡,因此在子元素上进入或离开的时候会触发其父元素的 pointerover、pointerout事件,但是却不会触发 pointerenter、pointerleave 事件。此时,touches 中有三个触摸点,targetTouches 中有两个触摸点,changeTouches 中有一个触摸点,就是滑动了的那根手机的触摸点。目标元素上所有的触摸点组成的类数组。原创 2022-10-06 19:48:58 · 1665 阅读 · 0 评论 -
《一》移动端基础
与移动 Web相对应的是运行在 PC 端浏览器上的 PC Web。自适应:根据不同的屏幕大小自动调整元素的大小。原创 2022-09-05 17:44:39 · 218 阅读 · 0 评论 -
pc端网页实现微信扫码登录
点击按钮,跳转微信授权页面,用户需要扫码进行授权登录。//拉取授权页面let appid = '自己应用的appid'let redirect_uri = encodeURIComponent('授权登录后跳转回的页面')location.href=`https://open.weixin.qq.com/connect/qrconnect?appid=${appid}&...原创 2020-04-15 16:40:54 · 9375 阅读 · 4 评论 -
公众号平台的H5实现微信授权登录
微信给开发者提供的测试账号平台:https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index开发文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.ht...原创 2020-04-16 10:14:05 · 5888 阅读 · 2 评论 -
H5实现微信的自定义分享功能
H5无法实现点击按钮直接唤起分享面板,只能用户手动点击右上角进行分享。绑定域名,先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”,即后端接口的域名。引入微信官方的JS-SDK文件:<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript"><...原创 2020-04-20 18:47:32 · 5973 阅读 · 0 评论 -
移动端淘宝授权
文档地址:https://open.m.taobao.com/doc.htm?spm=a219a.7386653.0.0.c549669anDR2sm#?treeId=420&docId=105590&docType=1&platformId=12。拼接用户授权需要访问的url:https://oauth.taobao.com/authorize?response_type=code&client_id=23075594&redirect_uri=http://w原创 2020-10-09 09:21:41 · 2587 阅读 · 0 评论 -
《三》移动端适配方案
移动端适配:在不同规格的移动设备上,页面能够尽可能统一地显示效果。PC 端存在的是不同浏览器的兼容问题;移动端存在的是不同机型的兼容问题。viewport 是可以设置布局视口等于视觉视口,页面就不需要再缩小以适应屏幕大小了。rem、vw 等是写一份代码,可以在不同大小的屏幕上使元素也显示不同的大小。例如:设置一个100*100的盒子,在 375px 的屏幕上显示是100*100,在 414px 的屏幕上是125*125等。移动端设计稿一般使用 iPhone8 的宽度 375px 作为基准值。原创 2020-12-20 13:47:40 · 314 阅读 · 1 评论 -
H5与安卓/IOS进行原生交互
首先要和App定好交互文档:JS调用安卓:映射名.方法名(参数);JS调用IOS:window.webkit.messageHandlers.方法名.postMessage(参数);App调用JS:window.方法名(参数);原创 2020-10-15 18:20:40 · 281 阅读 · 0 评论 -
H5无法实现而必须原生才能实现的功能
window.location.href="palmos://"; //某个APP应用内的指定页面链接setTimeout(function(){ window.location.href="xxxx"; //如果超时就跳转到APP下载页},2000);原创 2020-10-09 11:46:21 · 533 阅读 · 0 评论 -
iPhone安装.ipa文件
在电脑上下载一个爱思助手;使用数据线将手机连接到电脑上,在弹出窗口中选择信任;在电脑上,直接将ipa包拖到应用游戏的区域,就会在手机上安装了;原创 2020-09-29 10:58:51 · 600 阅读 · 0 评论 -
《五》移动端开发常见问题
问题:在高清屏下,1px 边框会变粗。产生原因:UI 设计师想要的 1px 的线,是在设备上能够显示的最小单位,即 1 物理像素;而开发工程师代码中的 1px,是 css 像素。在 dpr = 1 的标清屏下,一个方向上,1 css 像素 = 1 物理像素,此时没有问题;在 dpr > 1 的高清屏下,比如 dpr = 2 时,一个方向上,1 css 像素 = 2 物理像素,此时,如果开发工程师把边框设置为 1px,其实在设备上就是 2 物理像素,并不是最细的线了。原创 2020-05-18 09:47:33 · 389 阅读 · 1 评论 -
在手机上访问和调试本地的 H5 页面
在 cmd 里输入 ipconfig,就可以看到 ipv4 地址,也就是电脑本机的 ip 地址。原创 2019-07-05 16:48:49 · 11279 阅读 · 1 评论 -
《二》CSS 中常用的单位
CSS 中的单位整体上可以分为两类:绝对长度单位和相对长度单位。原创 2019-07-10 17:23:08 · 364 阅读 · 0 评论