文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

中高级前端必须注意的40条移动端H5坑位指南-HTML方向

提及的安卓系统包括Android和基于Android开发的系统 提及的苹果系统包括iOS和iPadOS 本文针对的开发场景是移动端浏览器，因此大部分坑位的解决方案在桌面端浏览器里不一定有效 解决方案若未提及适用系统就默认在安卓系统和苹果系统上都适用...本来想为每个坑位都截图或录制GIF作为演示，但考虑到目前微信公众号的编辑器操作图片还存在缺陷就放弃了，每次上传图片都会花费很多时间甚至上传失败。若需演示只能自行复制代码了。...appId=60000002">打开支付宝的蚂蚁森林 禁止页面缩放 在智能手机的普及下，很多网站都具备桌面端和移动端两种浏览版本，因此无需双击缩放查看页面。...直接声明autocapitalize=off关闭首字母大写功能和autocorrect=off关闭纠正功能。...autocapitalize="off" autocorrect="off"> 针对Safari配置 贴一些Safari较零散且少用的配置。 <!

1.2K20

H5 手机 App 开发入门：技术篇

希望学习和提高手机 App 开发技术的朋友，可以留意一下本文结尾的安卓课程信息。 一、手机 App 的技术栈 手机 App 的技术栈可以分成三类。...运行代码之前，Android Studio 要求必须连接真机，或安装安卓模拟器。完成以后后，在工具栏上点击运行按钮，就可以运行代码查看效果了。 ? ?...Adobe 公司将 PhoneGap 的核心代码，后来都捐给了 Apache 基金会，作为一个全新的开源项目，名为 Apache Cordova。 ?...举例来说，React Native 的文本渲染控件是，翻译成 iOS 控件为UIView，翻译成安卓控件为TextView。...如果你想用 React Native 做到 iOS 和安卓体验一致，并且充分发挥原生控件的功能，就需要同时熟悉 React Native、iOS、安卓三个平台，这对开发者的要求实在太高了。

8.9K41
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    Vue3.0入门 + Vant3.0移动端实践（三）使用Cordova打包Android App

    接着上面两节，把做成的h5小应用打包成android的app放置在手机上看看效果。 如何把一个h5应用打包成android的app? 使用Cordova就是一种简单不错的办法。...简单来说就是：使用Cordova这个框架可以让你支持混合应用开发，把h5的web应用打包成各种平台上能跑的类似原生的应用体验。且它还提供了一些访问平台设备的插件或api,方便使用js访问到硬件功能。...且一些原生才有的一些特性，cordova提供了一些符合标准的API绑定去访问每个设备的功能。 Cordova安装 Cordova的命令行运行在nodejs上面并且可以通过npm安装。...第四步，浏览器运行 cordova run ： cordova run 5.第五步，打包apk安卓运行，生成的安卓包 cordova platform add android (前提条件：电脑上已有...最后，已经接近成功啦， 执行cordova build android 生成的app-debug.apk竟只有1.6M,够小够轻量。 安装到手机或设备上成功流畅运行。

    3.2K21

    不写代码，让 AI 生成手机 APP！保姆级教程

    接下来无脑安装即可，会自动安装各种 Android 开发常用的工具、还有安卓设备模拟器： 这一步可能会有点煎熬，有些地区的朋友可能需要一些特殊的网络支持，你懂的。...除了上面的命令外，如果你想快速调试多个不同的平台，可以运行下列命令，统一查看各个平台： cordova serve --port 8000 添加安卓平台 接下来执行类似的命令来添加安卓平台： cordova...添加插件成功： 打包运行安卓 APP 打包 安装完插件后，执行 cordova build 命令可以打包 Android apk： cordova build android 看到下列信息表示打包成功...： 得到 apk 包后，有 2 种运行方式： 手机运行 可以直接将 apk 包发送到手机安装运行： 运行效果如图： 电脑运行 先打开 Android Studio 并启动安卓虚拟设备，然后执行 cordova...最后给大家一些建议，Cordova 比较适合中小型网站项目，尤其适合已经有网站项目想快速转为 APP 的场景；但如果你需要搞一个复杂的大项目，依赖很多移动设备的原生能力，使用 Cordova 就不是很合适了

    1.7K10

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

    ="off" autocorrect="off"> 针对特定浏览器的配置： Safari私有属性示例 <meta name="apple-mobile-web-app-capable" content...现象 在 iPhoneX 系列手机上，头部或底部区域可能会出现刘海遮挡文字或点击区域的情况，或者出现黑底或白底的空白区域。....elem { overflow: hidden; } ⭐️⭐️安卓上去掉语音输入按钮 input::-webkit-input-speech-button { display: none; }...⭐️⭐️Vue 单页应用在 iOS 上微信分享失效，图片，标题和描述均未正常显示，安卓上分享正常 原因 我们一般在 APP.vue 的 mounted 生命周期中初始化微信 SDK，此时页面的地址 hash...} ⭐️⭐️IOS解析日期问题 在某些情况下，苹果系统上解析 YYYY-MM-DD HH:mm:ss 格式的日期会报错 Invalid Date，而安卓系统则没有这个问题。

    2.7K21

    给Ionic写一个cordova(PhoneGap)插件

    就拿最近一个需求来说吧，需求：未防止第三方破解app，客户找了一个安全公司做个评估，其中一个安全问题是安卓apk的包经过修改后依然可以安装运行(ios由于安全机制存在不存在这个问题)，项目组内部讨论出一个比较好的解决方案是用户登陆前验证...，请看上图: src:是放置安卓，ios，wp8等原生代目的地方，一般为了区分各个平台的代码都会先建一个文件夹(以上是android),文件夹下面是代码文件。...cordova命令用的，请不要忽略~ plugin.xml:这个文件里面是以xml的形式定义了包的路径以及api(js)对应原生的调用方法......，如涉及版权及项目安全此文件可忽略~ 　　好了，咱们开始了~，首先按以上造型建文件和文件夹，我能说这是抄么-_-|||   　　完毕，先写个原生的android代码吧(反正咱不会写oc d=====(￣...，最后17行共享出来的是一个变量，方便打点调用，仿佛快成了~o(￣▽￣)d,别激动，这个会在最后的使用会详细讲解，现在安卓原生的逻辑已经写好了，api也已经写好，如何将两者结合起来，that is a

    1.9K40

    给Ionic写一个cordova(PhoneGap)插件

    就拿最近一个需求来说吧，需求：未防止第三方破解app，客户找了一个安全公司做个评估，其中一个安全问题是安卓apk的包经过修改后依然可以安装运行(ios由于安全机制存在不存在这个问题)，项目组内部讨论出一个比较好的解决方案是用户登陆前验证...，请看上图: src:是放置安卓，ios，wp8等原生代目的地方，一般为了区分各个平台的代码都会先建一个文件夹(以上是android),文件夹下面是代码文件。...cordova命令用的，请不要忽略~ plugin.xml:这个文件里面是以xml的形式定义了包的路径以及api(js)对应原生的调用方法......，如涉及版权及项目安全此文件可忽略~ 　　好了，咱们开始了~，首先按以上造型建文件和文件夹，我能说这是抄么-_-|||   　　完毕，先写个原生的android代码吧(反正咱不会写oc d=====(￣...，最后17行共享出来的是一个变量，方便打点调用，仿佛快成了~o(￣▽￣)d,别激动，这个会在最后的使用会详细讲解，现在安卓原生的逻辑已经写好了，api也已经写好，如何将两者结合起来，that is a

    2.4K100

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

    step;number中默认step是1,也就是step=0.01可以允许输入2位小数,并且点击上下箭头分别增加0.01和减少0.01;step和min一起使用时数值必须在min和max之间 问题3:部分安卓手机出现样式问题...,所以苹果系统和安卓系统通常都会禁止自动播放和使用JS的触发播放,必须由用户来触发才播放;解决方法思路:先通过用户touchstart触碰触发播放并暂停(让音频开始加载),后面用JS再操作就没问题了;解决代码...ios防止长按页面元素被选中 解决:加入样式可禁止用户进行复制,ios和一般的安卓都可以解决 -webkit-touch-callout:none; //系统默认菜单被禁用;可以实现页面因为长按弹出各种操作窗口...}); IOS键盘字母输入,默认首字母大写的解决方案 设置如下属性 autocapitalize="off" autocorrect="off" /> //input的三个属性...autocomplete:默认为on,代表是否让浏览器自动记录输入的值,可以在input中加入autocomplete="off"来关闭记录,保密输入内容;autocapitalize:自动大小写;autocorrect

    4K10

    移动端Web页面常见问题解决

    安卓浏览器看背景图片，有些设备会模糊。 用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？...经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的960*640分辨率，在网页里只显示了480320，这样...例如一个div的宽高是100100，背景图必须得200200，然后background-size:contain;，这样显示出来的图片就比较清晰了。 代码可以如下： background:url(.....用input监听键盘keyup事件，在安卓手机浏览器中是可以的，但是在ios手机浏览器中变红很慢，用输入法输入之后，并未立刻相应keyup事件，只有在通过删除之后才能相应！...另外一个是form提交的时候，默认给取整了。三是部分安卓手机出现样式问题。

    2.3K20

    神奇的Cordova — 利用H5进行APP开发

    cordova 的出现就是一股清流，它能实现将 h5 页面打包成 android 或 ios 版本，实现了 android、ios、pc 端页面的统一。 内容都用 h5 书写，差异性和成本都下降了。...它所支持的各种开源插件也能轻松实现对手机众多接口的调用，功能性上没有问题。 操作需要掌握一定 NodeJs Cordova 的安装： 1. 下载 jdk，安装 JAVA 环境，配置系统环境。...将代码包成 apk 文件 cordova build 9. 数据线将手机连接至电脑，手机打开 USB 调试模式。...输入命令 cordova run android --service 可在手机上安装安卓程序包，进行项目预览和调试。 cordova 的功能不止于此，官网有更详细的介绍，打开cordova 官网。...官网附有调用手机功能或其他功能的插件。github 上搜索 cordova + 关键字也可以找到很多很有用的插件。继续保持学习吧。 沈唁志|一个PHPer的成长之路！

    2.2K30

    安卓开发方式的进化之路

    做安卓时间长了，接触到各种各样的框架，前前后后遇到了很多问题，这里顺便记录一下那些年在安卓开发的发展过程中的那些跨平台开发技术框架，大致如下： 如有错误，欢迎指正。...2.受控于微信——比起APP，尤其是安卓版的高自由度，小程序要面对很多来自微信的限制，从功能接口，甚至到类别内容，都要接受微信的管控，部分敏感内容还很容易遭受封禁威胁。...可以添加至主屏幕，点击主屏幕图标可以实现启动动画以及隐藏地址栏 实现离线缓存功能，即使用户手机没有网络，依然可以使用一些离线功能 实现了消息推送 它解决了上述提到的问题，这些特性将使得 Web 应用渐进式接近原生...:现在ios手机端不支持pwa，IE也暂时不支持 Chrome在中国桌面版占有率还是不错的，安卓移动端上的占有率却很低 各大厂商还未明确支持pwa 依赖的GCM服务在国内无法使用 微信小程序的竞争 PWA...，让移动开发者通过简捷的前端语法写出Native级别的性能体验，并支持iOS、安卓、YunOS及Web等多端部署。

    2K20

    安卓开发方式的进化之路

    做安卓时间长了，接触到各种各样的框架，前前后后遇到了很多问题，这里顺便记录一下那些年在安卓开发的发展过程中的那些跨平台开发技术框架，大致如下： 如有错误，欢迎指正。...2.受控于微信——比起APP，尤其是安卓版的高自由度，小程序要面对很多来自微信的限制，从功能接口，甚至到类别内容，都要接受微信的管控，部分敏感内容还很容易遭受封禁威胁。...可以添加至主屏幕，点击主屏幕图标可以实现启动动画以及隐藏地址栏 实现离线缓存功能，即使用户手机没有网络，依然可以使用一些离线功能 实现了消息推送 它解决了上述提到的问题，这些特性将使得 Web 应用渐进式接近原生...支持率不高:现在ios手机端不支持pwa，IE也暂时不支持 Chrome在中国桌面版占有率还是不错的，安卓移动端上的占有率却很低 各大厂商还未明确支持pwa 依赖的GCM服务在国内无法使用 微信小程序的竞争...Native级别的性能体验，并支持iOS、安卓、YunOS及Web等多端部署。

    1.8K40

    使用 Cordova 构建应用的流程

    添加平台支持 添加平台和后续命令都需要在项目的目录或任何子目录中运行, 添加安卓 和 iOS平台 $ cordova platform add ios $ cordova platform add android...cordova-plugin-wechat 一个 cordova 插件，一个微信 SDK 的 JS 版本 cordova-plugin-zip 一个 Cordova 插件解压缩文件在安卓和 iOS。...除了核心插件之外，还有一些第三方插件为不一定在所有平台上都可用的特性提供了额外的绑定。 你可以使用插件搜索或 npm 来搜索 Cordova 插件。 您也可以开发自己的插件，如插件开发指南中所述。...插件 安卓插件开发指南 本节提供如何在 Android 平台上实现本地插件代码的详细信息。...build command reference documentation Cordova build 签署安卓应用 参数说明: 可以以上命令行参数对 Cordova CLI build或 run

    6.6K11

    Cordova、PhoneGap、Ionic，等等

    这与计算机 (或手机) 的软件架构十分相像。 软件是关于如何操作大量晶体管和电路 (两者统称为硬件) 的指令的集合。...举个例子，你可以使用 C++ 、Java (或 Kotlin) 或 Cordova 来开发安卓应用。C++ 写的应用是最原生的，而 Cordova 写的应用是最不原生的。...首先是原生阵营，例如安卓的 Java/Kotlin 和 IOS 的 Objective-C/Swift 。此阵营中的应用速度都很快，并且可以使用丰富的硬件功能。...用户界面是针对目标平台(安卓或 IOS)的定制的，因此使用起来是流畅且愉悦的。但是，所有这些好处都被限制在一个平台上了。...这些框架可以让 Web 开发人员使用他们已经具备的 HTML、CSS 和 JavaScript 技能来开发应用。这些应用可以同时运行在安卓和 IOS 平台上(还可以有更多平台)。

    3.8K40

    搞定混合开发面试，这一篇就够了！

    于是出现了一堆轮子，助力我们快速开发一个Hybrid App ? Cordova 这是社区最早出现的轮子，我们统称为 Cordova。...衍生应用开发平台 针对 Cordova 存在的问题，一些厂商给出了一种优化方案，并且给出友好的文档，但是本质上还是在 Cordova 的基础上做了以下几点改进： 以云平台的方式管理项目，整个开发周期除了写代码以外都能在平台上实现...JSBridge（webview UI）方案（这期重点学习的） 移动互联网疯狂发展中，it培训机构的崛起，ios，安卓工程师迅速被培养出来，市场一片欣欣向荣，大家可以脑补13年时候的ios安卓有多火，于是...其实JSBridge说白了就是去除了各大混合开发平台封装的一条龙的服务，而只保留了web和Native的通信部分，去在app的webview中嵌入web，来解决原生端解决不了的问题，比如：原生无法解析富文本...年4月开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物，支持iOS和安卓两大平台。

    3.2K20

    【系列】移动端项目经验 表单兼容（下篇）

    【系列】移动端项目经验 表单兼容（下篇） HTML5学堂：本文，我们将继续为大家总结介绍移动端的常见兼容问题，今天要提的是关于表单的一些兼容问题，主要包括调用相册的按钮样式处理；占位符placeholder...在我们的移动端网页当中，会有上传照片的操作需求。此时会使用到文件类型的input文本框，但是不同的系统不同的浏览器在样式上均不相同，而且，设置背景图也没有效果。...移动端兼容 - 占位符 placeholder新属性 具体情形：placeholder并不支持padding和height值，在Android手机原生浏览器里面如果设置了line-height的值，比如设为...在Android自带浏览器、百度手机浏览器、小米自带浏览器上出现左图的问题（占位符靠顶部）。UC/QQ浏览器正常如右图显示。...解决方法：移动版本webkit为 input元素提供了autocapitalize属性，通过指定autocapitalize=”off”来关闭键盘默认首字母大写。

    1.1K120
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券