备案控制台
学习
实践
活动
专区
工具
TVP
文章/答案/技术大牛
写文章

移动端H5开发基础

系统 总结 ---- 前言 随着移动端H5需求场景越来越多，例如微信公众号中H5页面的开发，APP中内嵌H5页面等，移动端H5开发基础知识和技巧是前端开发工程师必备的技能~ ---- 一、移动端屏幕相关概念 CSS像素 web开发的最小单位，一个CSS像素在移动设备上最终会转成物理像素去呈像 一个CSS像素占用多少个物理像素，取决于【设备特性】、【用户缩放行为】 3. 在PC web开发中无意义，无此概念。 4. 位图像素 1个位图像素对应一个设备独立像素，图片才能完美清晰的展现 5. 系统 参照理想视口进行缩放，改变布局视口和视觉视口 meta: initial-scale=1.0 ---- 总结 移动端和PC端比，有很多特有的概念需要理解。 理解了这些基础概念，才能掌握移动端H5开发技巧~ 发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/151992.html原文链接：https://javaforall.cn

48520
  • 广告
    关闭

    有奖征文丨玩转 Cloud Studio

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

    H5移动端开发学习总结

    对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点： 1.首先，选取一款手机的屏幕宽高作为基准(现在一般选取iphone6的375×667)。 如果把移动设备上浏览器的可视区域设为viewport的话，某些网站就会因为viewport太窄而显示错乱，所以这些浏览器就决定默认情况下把viewport设为一个较宽的值，比如980px，这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了 ideal viewport（完美视口）:完美适配移动设备的viewport，它的宽度等于移动设备的屏幕宽度。有了完美视口，用户不用缩放和拖动网页就能够很好的进行网页浏览。 CSS像素:px(设备独立像素) 逻辑像素，浏览器使用的抽象单位(之所以叫抽象单位，是因为其可以根据不同的设备和不同的关系来变大变小，所以称为抽象单位)为Web开发者创造的，在CSS和JavaScript 但是当屏幕超过一定的尺寸以后还继续显示h5页面的话会给用户带来不好的体验。因此，我们需要给页面设置最大的宽度和最小宽度。

    31020

    用于H5的移动开发框架

    用于H5的移动开发框架 今天给大家介绍10款有关HTML5移动开发APP开发框架,这几款框架都是比较优秀的移动 Web 开发框架，能够帮助开发者更加高效的开发移动Web应用。. 5 Intel XDK框架 　　Intel发布了其首个版本基于web的编程工具，可帮助开发者为Android和iOS开发移动应用。 开发者可用此软件开发基于HTML5的应用，并 用于移动设备中。 这样一款能够让开发者使用HTML、JS、CSS来开发跨平台移动App的开源免费框架，一直以来都深受开发者喜爱，从iOS、Android、BB10、Windows Phone到Amazon Fire OS 控件看起来太像网页，没有原生感觉，因此追求原生UI感觉也是我们的重要目标 　　MUI以iOS平台UI为基础，补充部分Android平台特有的UI控件 　　流畅体验 　　• 下拉刷新 　　为实现下拉刷新功能，大多H5

    75110

    收藏 | 移动端H5开发常用技巧总结

    html 篇 常用的meta属性设置 meta对于移动端的一些特殊属性，可根据需要自行设置 <meta name="screen-orientation" content="portrait"> // 同样地，我们也可以通过标签属性来开启长按邮箱地址弹出邮件发送的功能： dooyoe@gmail.com css 篇 0.5px细线 移动端 H5 项目越来越多，设计师对于 UI 的要求也越来越高，比如 1px 的边框。 在高清屏下，移动端的 1px 会很粗。 那么为什么会产生这个问题呢？ body { overflow-y: hidden; } .wrapper { overflow-y: auto; } js 篇 移动端click屏幕产生200-300 ms的延迟响应 移动设备上的

    70820

    移动端H5开发之页面适配篇

    最近开发并上线了一款H5项目，在这里想和大家分享一下关于项目中使用到的移动端适配技巧，如果对你们有所帮助的话，就多多点赞收藏各位看官老爷别着急，在讲页面适配之前，我们先来捋一捋viewport（视口）的概念 图片在说viewport方案之前，我们先来解决移动端dpr普遍>=2的问题。 10px; border: solid 2px #000;} 但是viewport的适配方案也有一定的缺点，那就是不能设置一个最大宽度的阀值，只能跟着浏览器视图大小的改变而变化，这样对于一些想要在pc和h5 这个函数最初由 iOS 浏览器提供，用于允许开发人员将其内容放置在视口的安全区域中，该规范中定义的 safe-area-inset-* 值用于确保内容即使在非矩形的视区中也可以完全显示。 1.5 总结说了这么多，我们简单的来总结一下：1.对于需要移动端、PC端都正常展示的项目推荐使用rem布局；2.对于只在移动端展示，且内容量较少的页面推荐使用vw布局;当然媒体查询@media也可以用来进行页面适配

    3.2K92

    H5开发移动端APP基于H5+

    写在前面   一直从事iOS原生APP开发，对H5前端开发那一套因为无知所以一直生畏，所以很长的一段的时间里只做原生的开发,但对跨平台的这种技术操作始终抱有很大兴趣。 关于H5开发移动端APP 优点： 很大的好处就是快速、简单、方便，一套代码几乎不用怎么修改就可以同时打包iOS、Android安装包。 基于前端各方面应用技术栈成熟，资料齐全。 开发工具框架之类的太多，如果一个不熟悉前端的新人过来，几乎不知道该如何下手。 所以对于一些业务逻辑简单，没有复杂的操作处理的应用，H5开发再好不过。 对一些重型的应用还是原生的为主，H5为辅助也是一个很好的搭配。 开始着手 首先开发工具及框架，我选择了 HBuilderX，一个牛逼而又好用的前端开发工具。 ? 以后文章会不断的更新，介绍关于iOS开发学习总结 ， 介绍基于MUI 、H5+ 及H5开发中感悟记录总结。感觉有用就点赞哈，喜欢就大胆的关注。

    1.2K10

    H5开发移动端APP基于uni-app

    之前写过基于mui，h5 plus的APP开发 https://www.jianshu.com/p/8e7e8312f93d，这次在写个兄弟篇 uni-app开发APP。 1、为什么选择uni-app 基于mui，h5plus这一套技术操作随着后续的开发及项目跟进感觉越发力不从心。 熟悉了利用hx h5+的开发转uniapp基本不用再考虑开发工具了，相同血脉几乎相同的套路，曾经的h5+也可以直接混入使用当然仅限APP端。 uniapp 官方主推，据说性能提高优化了很多。 3、开始 本文相当简洁地记述实际问题与开发总结，在此之前你肯定必须已经了看几遍官方文档及框架介绍。 关于布局： 初次上手实属不易，布局首页列表页面搞了好久效果还是不如意。 自定义组件开发及使用。 实现登录页面及功能。 选择图片、拍照修改头像。 用户数据本地存贮。 uni 其他基础组件。

    1.5K20

    一文读懂H5移动开发调试技巧

    内容来源：作者 | Jartto，http://jartto.wang/2018/11/01/mobile-debug/ 阅读字数：4478 | 12分钟阅读 摘要 随着移动设备的高速发展，H5 开发也成为了 而移动开发的重中之重就是掌握调试技巧，定 Bug于无形。 一、概要 因为移动端操作系统分为 iOS 和 Android 两派，所以本文的调试技巧也会按照不同的系统来区分。 – Safari – 高级 – 打开 Web 检查器 大功告成，这时候通过手机的 Safari 来打开 H5 页面，我们通过浏览器开发选项可以看到： ? 可以看到 H5 已经在「壳子」中运行起来了，下来就可以尝试调用 Webview 的方法，和「壳子」交互了。更多的调试技巧可以参考文章：iOS 模拟器调试。 看起来很完美，但是有个小缺点：网络请求，需要刷新页面，可是很多内嵌的 H5 页面是没有机会刷新页面的，所以需要客户端童鞋配合增加刷新的功能方便调试。

    85220

    移动端H5多页开发拍门砖经验

    2016年刚接触移动端开发，刚开始比较疑惑，每次遇到问题都是到社区里提问或者吸取前辈的经验分享，感谢热衷于分享的开发者为前端社区带来欣欣向上的生命力。 本文结合先前写的文章和开发经验分享给大家，希望也能帮助刚步入移动端开发的新人解惑。以下会以其中一个以公积金页面开发项目作为例子，介绍移动端的一些常见问题和使用Vuejs作为lib进行多页开发的经验。 移动端自适应布局 在项目中移动端最常用的自适应布局方案就是flexbox结合rem。 下面附上微信端和浏览器端的效果图： 微信端：[微信端] 浏览器端： [浏览器端] Vuejs作为lib开发移动端页面 为何不使用SPA模式 一般移动端使用vue是为了数据交互频繁而且快速开发的页面，为什么不使用单页 H5基于微信jsSDK，你一定接触过微信授权域名，微信会将授权数据传给一个回调页面，而回调页面必须在你配置的域名下（含子域名）。

    42530

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

    前言 在平时的H5移动端开发时，我们难免会遇到各种各样的坑点，这篇文章就带着大家来看看怎么解决，文章较长，建议收藏方便以后查阅！ format-detection" content="telephone=no"> 默认情况下设备会自动识别任何可能是电话号码的字符串,设置telephone=no可以禁用这项功能,设置不识别邮箱和地址也同理 h5 网站input设置为type=number的问题 h5网页input的type设置为number一般会产生三个问题: 问题1:maxlength属性不好用 <input type="number" oninput rtl; } 问题2:禁用select默认箭头 ::-ms-expand修改表单控件下拉箭头,设置隐藏并使用背景图片来修饰 select::-ms-expand { display:none; } 移动端 mobilesafari中;这与往返缓存(bfcache)有关系,解决方法: window.onunload = function(){}; 定位的坑 在IOS下fixed定位在软键盘顶起时会失效，所以我们在开发时统一使用

    1.1K10

    12个关于移动 H5 开发的采坑问题汇总

    作为一个开发了多个 H5 项目的前端工程师，在开发过程中难免会遇到一些兼容性等爬过坑的问题。现在我将这些问题一一汇总一下，并在后面给出坑产生的原理，和现阶段常规的填坑方案。 （经常更新该文） 移动端 H5 相关问题汇总： 1px 问题 响应式布局 iOS 滑动不流畅 iOS 上拉边界下拉出现白色空白 页面件放大或缩小不确定性行为 click 点击穿透与延迟 软键盘弹出将页面顶起来 、收起未回落问题 iPhone X 底部栏适配问题 保存页面为图片和二维码问题和解决方案 微信公众号 H5 分享问题 H5 调用 SDK 相关问题及解决方案 H5 调试相关方案与策略 移动端 H5 相关基础技术概览 开发中是比较常见的 Bug。 关于移动端 H5 的文章告一段落了，之后实践中遇到的问题都将在此文中更新。另外准备做一个移动端 H5 开源项目。多关注下 我的github[5]动态哦！

    58220

    H5和移动端通信

    UIWebView）WKScriptMessageHandler（只适用于WKWebView，iOS8+）Bridge第三方框架（适用于UIWebView和WKWebView）1. url拦截url拦截是在H5 请求一个地址后，客户端拦截住这个地址，对地址进行解析处理H5中调用iOS方法代码：弹出登录弹窗(拦截url)iOS中拦截到url代码：- (BOOL (app方法名).postMessage() H5代码<body> <input type="button" name="" value="登录" onclick="login()"><script type WKWebView alloc] initWithFrame:self.view.frame configuration:config]; webView.UIDelegate = self;}// H5 拦截url和iOS中使用类似H5中调用iOS方法代码：弹出登录弹窗(拦截url)Android中拦截到url代码：webView.setWebViewClient

    27330
    点击加载更多

    关注

    腾讯云开发者公众号
    将获得
    10元无门槛代金券
    洞察腾讯核心技术
    剖析业界实践案例
    腾讯云开发者公众号二维码

    相关产品

    • 移动开发平台

      移动开发平台

      腾讯移动金融开发平台(TMF)为银行、互联网金融、保险、证券客户提供一站式、覆盖全生命周期的移动金融服务。核心服务包括APP客户端开发组件、应用加固、环境安全检测等APP开发运营关键服务，帮助金融机构低成本、高效率地打造移动金融服务…...

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      扫码关注腾讯云开发者

      领取腾讯云代金券