首页
学习
活动
专区
工具
TVP
发布

移动H5开发基础

文章目录 前言 一、移动屏幕相关概念 1. 屏幕尺寸 2. 屏幕分辨率 3. 屏幕像素密度(ppi = pixels per inch) 二、像素 1. 物理像素 2. CSS像素 3....系统 总结 ---- 前言 随着移动H5需求场景越来越多,例如微信公众号中H5页面的开发,APP中内嵌H5页面等,移动H5开发基础知识和技巧是前端开发工程师必备的技能~ ---- 一、移动屏幕相关概念...CSS像素 web开发的最小单位,一个CSS像素在移动设备上最终会转成物理像素去呈像 一个CSS像素占用多少个物理像素,取决于【设备特性】、【用户缩放行为】 3....系统 参照理想视口进行缩放,改变布局视口和视觉视口 meta: initial-scale=1.0 ---- 总结 移动和PC比,有很多特有的概念需要理解。...理解了这些基础概念,才能掌握移动H5开发技巧~ 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/151992.html原文链接:https://javaforall.cn

1.3K20
您找到你想要的搜索结果了吗?
是的
没有找到

H5移动开发学习总结

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

89320

java移动开发_移动开发

1.移动端视口问题 视口是指浏览器的可视区域,移动的视口到底是多宽呢? 现在市面上的大部分手机,比如iphone X,它的默认视口宽度为980px,而一个iphone X的屏幕宽度仅仅为375px。...我们可以使用谷歌浏览器的移动调试工具,来访问百度的搜索结果,可以看到网页明显被缩小了,而且页面宽度定格在980px(不信的话大家可以试试)。...3.移动尺寸 是同一个网页在不同尺寸手机中的效果。...这样一来,就要求我们在开发移动的页面时,当遇到字体大小、宽高、margin、padding等尺寸类的属性时,不能设置固定的像素值。 注:border边框大小除外 (既然有问题,怎么会没有解决办法呢?...注意:在移动,如果使用了背景图(比如雪碧图),记得用同样的方式调整背景图的尺寸。 题外话:移动看上去是不是很麻烦?视口那么小,还要引入各种东西,里面要添加的又杂又乱,还要计算数值,是不是很麻烦?

4.8K20

移动H5开发之页面适配篇

最近开发并上线了一款H5项目,在这里想和大家分享一下关于项目中使用到的移动适配技巧,如果对你们有所帮助的话,就多多点赞收藏各位看官老爷别着急,在讲页面适配之前,我们先来捋一捋viewport(视口)的概念...一般我们所说的视口共包括三种:布局视口、视觉视口和理想视口1.1 布局视口图片在移动,布局视口被赋予一个默认值,大部分为980px,这保证PC的网页可以在手机浏览器上呈现,用户可以手动对网页进行放大。...淘宝的手淘团队,在做移动适配时,使用的flexible方案核心就是rem适配,打开他们的github源码,会发现比rem逻辑多了一些dpr的处理。...图片在说viewport方案之前,我们先来解决移动dpr普遍>=2的问题。...1.5 总结说了这么多,我们简单的来总结一下:1.对于需要移动、PC都正常展示的项目推荐使用rem布局;2.对于只在移动展示,且内容量较少的页面推荐使用vw布局;当然媒体查询@media也可以用来进行页面适配

6.2K92

H5开发移动APP基于H5+

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

1.6K10

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 官方主推,据说性能提高优化了很多。...关于h5+: uni-app App 内置 HTML5+ 引擎,让 js 可以直接调用丰富的原生能力。 不需要 plus ready ,可以直接使用。...自定义组件开发及使用。 实现登录页面及功能。 选择图片、拍照修改头像。 用户数据本地存贮。 uni 其他基础组件。

2.2K20

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

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

1K30

移动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定位在软键盘顶起时会失效,所以我们在开发时统一使用

2.9K10

10-移动开发教程-移动事件

在前端的移动Web开发中,有一部分事件只在移动产生,如触摸相关的事件。接下来给大家简单总结一下移动的事件。 1....PC事件在移动的兼容问题 1.1 click事件的200~300ms延迟问题 由于移动默认的布局视口宽度是980像素,所以网页文字非常小,为了快速让网页还原到原来的大小,Safari最新引入了双击缩放功能...移动特有的touch事件 由于移动设备大都具备触摸功能,所以移动浏览器都引入了触摸(touch)事件。...封装移动tap事件 由于点击事件经常使用,如果用click会有延迟问题,一般我们会用touch事件模拟移动的点击事件, 以下是封装的几个事件,仅供参考。...---- 参考文章: 移动web开发---Touch事件详解 MDN:TouchEvent 移动前端常见的触摸相关事件touch、tap、swipe等整理

6.6K80

移动开发初识

对于pc的前端开发以及html5和css3学习过后对页面布局更加熟练了,对于现在开发更多倾向于移动开发,对于移动开发和传统PC开发又有所不同,下面简单认识下移动开发概况!...对于学习移动开发首先要了解下面三个概念(设备独立像素,物理像素,和像素比),下面简单介绍下这三个概念!...上面说过的设备独立像素如何改变,下面就看看使用移动开发的meta的viewport标签 <meta name="viewport" content="width=device-width,initial-scale...minimum-scale=1,maximum-scale=1//最大最小缩放比例,一般不用设置 <em>移动</em><em>端</em><em>开发</em>的meta标签一般只需要一下的属性就行 我们不喜欢用户进行缩放,直接我们在<em>开发</em>过程中,转换成对应的物理像素能较好的观察哦设备的显示效果

97940

移动开发总结

1.前言 到目前为止,互联网行业里,手机越来越智能化,移动占有的比例越来越高,尤其实在电商,新闻,广告,游戏领域。...如何让我们所开发的手机页面能有更好的交互体验,就是这篇文章的主旨:移动web开发问题和优化小结。...尤其是在移动,请求显得特别珍贵,在网速的不好的情况下,请求就是珍贵中的珍贵。...,后来自己找不到方法,直接在sf上提问了,大家可以去参考下:移动轮播图,上下滑动的时候不触发页面的滚动 ps:滑动我没有使用什么库,是我根据touchstart和touchend的移动距离来判断是左右滑动或者上下滑动...2.web移动页面性能优化方案 3.Web前端优化最佳实践及工具集锦 4.移动前端系列——移动页面性能优化 5.Web性能优化:图片优化 16.小结 我在移动web(手机网站)上,遇到的问题,暂时就是上面这些了

2.6K10

10-移动开发教程-移动事件

在前端的移动Web开发中,有一部分事件只在移动产生,如触摸相关的事件。接下来给大家简单总结一下移动的事件。 1....PC事件在移动的兼容问题 1.1 click事件的200~300ms延迟问题 由于移动默认的布局视口宽度是980像素,所以网页文字非常小,为了快速让网页还原到原来的大小,Safari最新引入了双击缩放功能...移动特有的touch事件 由于移动设备大都具备触摸功能,所以移动浏览器都引入了触摸(touch)事件。...封装移动tap事件 由于点击事件经常使用,如果用click会有延迟问题,一般我们会用touch事件模拟移动的点击事件, 以下是封装的几个事件,仅供参考。...---- 参考文章: 移动web开发---Touch事件详解 MDN:TouchEvent 移动前端常见的触摸相关事件touch、tap、swipe等整理

6.3K70
领券