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

    移动开发平台即将公测上线

    移动开发平台帮您解决以下后顾之忧，修个Bug发版本时间太长、应用测试覆盖不全机型、业务增长缺少各种数据...

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

    移动端H5开发基础

    文章目录 前言 一、移动端屏幕相关概念 1. 屏幕尺寸 2. 屏幕分辨率 3. 屏幕像素密度（ppi = pixels per inch） 二、像素 1. 物理像素 2. CSS像素 3. 系统 总结 ---- 前言 随着移动端H5需求场景越来越多，例如微信公众号中H5页面的开发，APP中内嵌H5页面等，移动端H5开发基础知识和技巧是前端开发工程师必备的技能~ ---- 一、移动端屏幕相关概念 用户缩放 用户手动放大：1个CSS像素面积变大，区域内CSS像素个数减少，视觉视口尺寸变小 移动端，用户缩放影响视觉视口的尺寸（布局视口影响布局（块换行等），引起重绘等，所以改变的是视觉视口） 2. 系统 参照理想视口进行缩放，改变布局视口和视觉视口 meta: initial-scale=1.0 ---- 总结 移动端和PC端比，有很多特有的概念需要理解。 理解了这些基础概念，才能掌握移动端H5开发技巧~ 发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/151992.html原文链接：https://javaforall.cn

    25120

    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 JavaScriptInterfaceH5端代码<body> <input type="button" name="" value="登录" onclick="login()"><script type

    10730

    H5移动端开发学习总结

    对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点： 1.首先，选取一款手机的屏幕宽高作为基准(现在一般选取iphone6的375×667)。 如果把移动设备上浏览器的可视区域设为viewport的话，某些网站就会因为viewport太窄而显示错乱，所以这些浏览器就决定默认情况下把viewport设为一个较宽的值，比如980px，这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了 ideal viewport（完美视口）:完美适配移动设备的viewport，它的宽度等于移动设备的屏幕宽度。有了完美视口，用户不用缩放和拖动网页就能够很好的进行网页浏览。 1.0表示不缩放 user-scalable – 用户是否可以手动缩放,no表示不可以手动缩放 忽略将页面中的数字识别为电话号码： <meta name="format-detection" content 但是当屏幕超过一定的尺寸以后还继续显示h5页面的话会给用户带来不好的体验。因此，我们需要给页面设置最大的宽度和最小宽度。

    15520

    移动端H5坑位指南

    -- 多选文件 --> <input type="file" multiple> 忽略自动识别 有些移动端浏览器会自动将数字字母符号识别为电话/邮箱并将其渲染成上述调用系统功能里的。 query]，笔者曾经发表过《H5与App的通讯方式》讲述URL Scheme的使用。 鉴于该方案的成功，其他移动端浏览器也复制了该方案，现在几乎所有移动端浏览器都配备该功能。而该方案引发的点击延迟被称为点击穿透。 通常移动端浏览器都会配备长按二维码图片识别链接的功能，但长按二维码可能无法识别或错误识别。 使用渲染 使用<svg>渲染 使用<canvas>渲染 复制代码 经过网易MTL测试的数据显示，大部分移动端浏览器只能识别渲染的二维码，为了让全部移动端浏览器都能识别二维码，那只能使用渲染二维码了

    11310

    移动端车牌离线识别效果佳

    手机拍照识别车牌是指通过计算机视觉、图像处理与模式识别等方法从车辆图像中提取车牌字符信息,从而确定车辆身份的技术。手机拍照识别车牌分为车牌定位、字符分割、字符识别三大部分。 手机拍照识别车牌技术的识别率在白天能达到99%以上，夜间95%以上；识别速度在不超过1秒，集成于移动警务通中，通过设备摄像头拍摄车牌自动识别车牌号，能够节省一半以上的车牌录入时间。 支持牌照全：包括新能源车牌、蓝牌、黑牌、黄牌（双）、军牌（双）、警牌、农用车牌、教练车牌、大使馆等各种规格牌照； 2.识别速度快：极致优化的车牌定位和识别算法; 3.整牌识别率高：尤其汉字识别摇摇领先同类产品 ； 4.车牌宽度要求低：车牌宽度≧50个像素，都不影响识别； 5.手机拍照识别车牌采用纯C代码编写。 移动端车牌离线识别技术是一款成熟的安卓手机拍照识别车牌，可以看到它支持的车牌类型很多，而且对摄像头像素要求不高，所以集成手机拍照识别车牌软件的时候方便了很多。

    53720

    收藏 | 移动端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的延迟响应 移动设备上的

    28420
    点击加载更多

    关注

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

    相关产品

    • 移动开发平台

      移动开发平台

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

    相关资讯

    热门标签

    更多标签

    活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2023 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 京公网安备 11010802017518 粤B2-20090059-1

    扫码关注腾讯云开发者

    领取腾讯云代金券