移动端开发基础

最新推荐文章于 2021-10-23 20:47:27 发布
最新推荐文章于 2021-10-23 20:47:27 发布
阅读量396 收藏 1
点赞数 1
分类专栏： 前端开发详解 文章标签： 移动开发 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_18835599/article/details/115560902
版权

移动端基础

一、什么是移动Web？

移动web，运行在移动设备上的页面网页

移动设备包括：手机、平板、地铁展示栏，商场的智能导航机器人其他的一些手持触摸设备等
在这里插入图片描述
在这里插入图片描述

产品分类

app（手机应用）

现在流行的app大部分都是原生app开发者开发
安卓开发工程师
IOS开发工程师

使用JavaScript来开发原生的app
phone Gap、React native、…

H5

就是HTML页面，基本都是运行在浏览器中
PC浏览器：chrome、safari、火狐…
移动端浏览器：后续专门介绍

app与H5的优劣势

app

优势:
​ 功能完善【如调用产品电量】、体验好、可以离线使用【没有网页可以用】

​ 劣势：
​ 开发成本高【不同的平台需要开发不同的版本】、迭代不可控【上线通过的时间不受控制】、内容限制

H5

优势：
​ 跨平台、开发成本低、更容易迭代【连上服务器直接上传修改】

​ 劣势：
​ 功能有限、操作体验欠佳、无法离线使用

二 、H5运行环境的分类

*移动端浏览器

*原生APP的webview中（hyBrid模式）

开发的H5页面嵌入到app的webview中显示

【webview 就像一个嵌套在app中的浏览器】

为什么会出现这种模式？
  • 很好的发挥两者的优势，规避两者的弱势
  • 涉及到操作系统级别的选择用 app 来做，需要及时更新的就选择 H5做 ，分工明确
  • 这种模式，可能就是以后工作中最经常要用到的
    在这里插入图片描述
    webview不需要我们来书写实现，安卓和ios内部已经有这个东西了，我们只需要把写好的h5页面传到服务器上，把服务器地址给安卓或ios工程师即可，由他们把我们的页面放入webview中

三、PC与移动web开发的区别

  • 终端设备

  • 输入特性

    pc:靠键盘输入

    移动端：软键盘、语音输入

  • 屏幕

    pc:分辨率差别不大，不论什么样的分辨率都需要版心放素材

    移动端：移动设备屏幕大小分辨率各种各样层出不穷，需要兼容不同的屏幕

  • 浏览器

    浏览器差别大不，都是使用同样的内核，谷歌，ie等等

  • 开发调试

    移动端：在这里插入图片描述

  • 视口

    • 布局视口

      在写h5页面时候进行的布局分配

    • 视觉视口

      看到屏幕的样子

  • 布局方式

    我们前面学习的pc端的布局，浮动定位等等，在移动端同样适用

四、移动端屏幕

PPI

代表屏幕每英寸的像素数量，即像素密度
高PPI屏幕显示的元素会比较精细（看起来会比较小），低PPI屏幕显示的元素相对来说就比较粗糙（看起来会比较大）

像素分类:

  • 设备像素(device independent pixels):

    设备屏幕的物理像素，任何设备的物理像素的数量都是固定的

  • CSS像素(CSS pixels):

    又称逻辑像素，是为web开发者创造，在CSS和JavaScript中使用的一个抽象的层【就是我们自己书写的多少px的像素】

屏幕缩放
PC端：

css的1个像素往往都是对应电脑屏幕的1个物理像素
下图为4个CSS像素完全覆盖了4个设备像素
在这里插入图片描述

移动端：

由于屏幕尺寸的限制，缩放是经常性的操作
设备像素(深蓝色背景)、CSS像素(半透明背景)

缩小操作时，1个设备像素覆盖了多个CSS像素
在这里插入图片描述
放大操作时，1个CSS像素覆盖了多个设备像素
在这里插入图片描述

DPR：设备像素比

设备像素比DPR(devicePixelRatio)是默认缩放为100%的情况下，设备像素和CSS像素的比值

DPR = 设备像素 / CSS像素(某一方向上)

DPR值越大，屏幕分辨率越高

Retina屏幕

同样大小的屏幕上,像素多了一倍,DPR = 2

DPR=2的屏幕最早出现在苹果4s这款手机上

在这里插入图片描述

五、移动端浏览器及内核分析

PC端浏览器

chrome、safari、firefox、IE

移动端浏览器类型

内置浏览器【手机到手后，手机厂商已经内置好的浏览器】

可下载浏览器【可自行下载的浏览器】

代理浏览器【知道】

webview【h5页面运行在app端内部的浏览器】

内核

浏览器内核：也称为渲染引擎或排版引擎，主要用于对网页语法进行解释，并进行网页渲染，将网页代码转换为看得到的页面。可分为两部分：渲染引擎和 js引擎。

Gecko内核,css前缀为"-moz-",代表 firefox
WebKit内核,css前缀为"-webkit-"，代表 chrome、苹果、微信等
Presto内核,css前缀为"-o-",代表Opera(欧朋)
Trident内核,css前缀为"-ms-",代表IE

六、视口

视口分:

视觉视口： 眼在页面上看到的内容
布局视口：写html代码时的布局宽高

1、布局视口：
<style>
    header{height: 50px ; background: pink; margin-bottom: 10px;}
    aside{width: 30%; background: red; height: 300px; float: left;}
    article{width: 68%; background: pink; height: 300px; float: left;}
</style>
<body>
    <header></header>
    <aside></aside>
    <article></article>
</body>

上述代码,在浏览器中的显示：在这里插入图片描述

如果把上述放在移动设备上预览会是什么样子呢？

页面整体被压缩
在这里插入图片描述

相同的内容，当窗口变窄，只是尽可能缩小网站来让用户看到网站的全貌。这对易读性来说不是件好事,在移动端上如何显示PC端的网页？

在移动端上，视口与移动浏览器屏幕宽度不再相关联，而是完全独立的，我们称它为布局视口

在这里插入图片描述

实际为容纳桌面浏览器设计的网站，默认的布局视口宽度远大于手机屏幕的宽度

3、理想视口

默认情况下，一个手机或平板浏览器的布局宽度是在980px或1024px。虽然这能让桌面网站不被压扁，但是这并不理想，尤其对手机用户，因为在狭窄的屏幕上更适合一个狭窄的网站在这里插入图片描述
那么，真正适合手机的视口是什么呢？？？？

viewport理想视口

  • 布局视口宽度 = 视觉视口宽度 = 设备宽度( = 内容宽度)
<meta name="viewport" content="width=device-width, initial-scale=1.0 "/>;

<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
4、自定义用户代码片
{
	"html": {
		"prefix": "html",
		"body": [
			"<!DOCTYPE html>",
			"<html>\n",
			"<head>",
			"\t<meta charset=\"UTF-8\">",
			"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0\">",
			"\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
			"\t<title>Document</title>",
			"\t<link rel=\"stylesheet\" href=\"$1\">",
			"\t<script src=\"$2\"></script>",
			"</head>\n",
			"<body>\n$3",
			"</body>\n",
			"</html>"
		],
		"description": "The full sample code - html5."
	}
}

七、使用相对长度单位em布局网页内容

em是描述相对于当前对象内文本的字体尺寸，它是相对长度单位【相对于父元素的fon-size值进行变化的】。

一般浏览器字体大小默认为16px

适用场景：
当适用首行缩进2个字的时候

相对单位em的特性
  • em的值并不是固定的
  • em会继承父级元素的字体大小（相对父级的字体大小而发生变化）

实际应用中每次都这样去乘以父级的大小也是很麻烦的，有什么方法可以简化？

如果1em等于10px，

那计算起来就方便了

body{
    font-size: 62.5%;
}

八、12、相对单位rem

使用em把像素向em进行换算的过程，有一点复杂

相对单位rem的特性：

rem的值并不是固定的
rem是相对根节点html发生变化的（和父节点无关）
实际开发中一般默认的把html根节点设置为10px（62.5%）或者是100px，方便后续计算

通过js动态实现尺寸自适应
<script>
    function setRem() {
        var ui_w = 375;
        // 获取屏幕的宽度
        var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
        console.log(ui_w,clientWidth);

        // 通过js动态改变html根节点字体大小
        var html_ = document.getElementsByTagName('html')[0];
        html_.style.fontSize = (clientWidth/ui_w)*100 +'px';
    }
    // window.onresize 浏览器被重置大小执行事件
    window.onresize = setRem;


</script>

相对单位rem是集相对大小和绝对大小的优点于一身

通过它既可以做到只修改根元素字体大小就成比例地调整页面所有字体大小

又可以避免字体大小逐层复合的连锁反应

感谢支持：@快乐养兔

管乐明
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
移动端开发基础知识之三倍图
05-28
移动端开发基础知识之三倍图
Hybrid App & WebViewJavascriptBridge
lgzaaron的博客
06-23 409
Hybrid App（混合模式移动应用）是指介于 Web App 和 Native App 这两者之间的 App，兼具「Native App 良好用户交互体验的优势」和「Web App 跨平台开发的优势」。 实现原理 Hybrid App 的原理很简单——在原生应用中开启一个网页。可以是全屏都交给网页，或者是一部分（比如导航栏）由原生应用实现，另一部分是一个网页。 技术细节
移动端开发基础知识
热门推荐
陈皮糖的博客
04-09 1万+
移动web开发指的是: 需要适配移动设备的网页开发 移动web开发与pc端web开发没有本质的区别，使用的还是HTML/CSS/JavaScript的技术 移动端与pc端web开发的区别: 1、浏览器不同 移动端的浏览器与pc端不同 谷歌浏览器 苹果浏览器、 UC浏览器 QQ浏览器 百度手机浏览器 360安全浏览器 搜狗浏览器 猎豹浏览器等 国内的手机浏览器都是根据webkit内核修...
web 移动端开发基础
Mr_Lixiaoshuai的博客
05-29 245
web 移动端开发基础 文章目录web 移动端开发基础了解视口相关内容meta 视口标签掌握二倍图用法物理像素 & 物理像素比多倍图二倍精灵图做法了解移动端常见选择方案掌握移动端常见问题解决方案移动端常见的布局方式流式布局（百分比布局）flex 布局rem 布局 了解视口相关内容 视口 viewport - 浏览器显示页面内容的屏幕区域。视口可以分为 布局视口，视觉视口，理想视口 layout viewport （布局视口） 一般移动设备的浏览器默认设置一个布局视口，用于解决早起 PC 页面
快速搞定移动端混合开发基础
01-03
一、混合开发介绍 1.1、什么是混合开发？ 1.2、混合开发优缺点 1.3、混合开发应用场景 1.4、了解混合开发的意义 二、混合开发的核心技术 2.1、混合开发核心技术——JSBridge 2.2、混合开发主流技术框架 2.3、...
移动端web开发进阶
01-30
三个月前曾写过一篇跨终端响应式页面设计入门的博客，上了博客园头条也得到了不少关注，今天想在这篇博客的基础上，继续写一篇进阶的文章。基于“入门”一文，我想再补充几个基础知识点，主要都是针对iOS的meta标签...
移动端布局基础知识.md
04-14
* 国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android开发的一样 * 兼容移动端主流浏览器，处理Webkit内核浏览器即可
web前端JavaScript嵌入百度地图API的方法 最详细
管乐明的博客
04-13 1万+
web前端JavaScript嵌入百度地图API最详细的方法一、申请成为百度开发者，获得使用地图API接口的权限，获取（AK）码。二、实现首图效果（可以参考开发者指南）1. 根据Hello World 手册操作2. 将代码块写入Demo中3. 开启鼠标滚轮缩放4. 添加标注 并且通过标注获取当前位置经纬度5. 启用信息窗口6. 自定义信息窗口三、去除地图左下角logo标志级文字四、更多功能 先看效果图 一、申请成为百度开发者，获得使用地图API接口的权限，获取（AK）码。 打开百度地图开放平台 打开网址
css、Flex布局实现水平居中与垂直居中的方法
管乐明的博客
04-13 1万+
实现水平与垂直居中水平居中行内元素块级元素垂直居中单行文本的水平垂直居中多行文本的水平垂直居中块级元素水平垂直居中固定宽高的水平垂直居中不固定宽高的水平垂直居中基于Flex实现水平垂直居中橘子很甜。@快乐养兔 水平居中 行内元素 text-align:center; 块级元素 定宽：可以采取决定定位的方式实现 .center { width: 960px; position: absolute; left: 50%; margin-left: -480px; } 不
解决弹出 “百度未授权使用地图API,可能是因为您提供的密钥不是有效的百度LBS开放平台密钥”的方法
管乐明的博客
04-13 7191
解决调用百度地图API弹出提示 “百度未授权使用地图API,可能是因为您提供的密钥不是有效的百度LBS开放平台密钥”的方法错误提示重新配置百度地图API 应用配置重新回到代码进行验证 错误提示 今天调用百度地图API的时候提示“百度未授权使用地图API，可能是因为您提供的密钥不是有效的百度LBS开放平台密钥…”，去试了好久，又重新建了Dome，重新把AK码写入代码片段，才解决这个原因。 重新配置百度地图API 应用配置 搜索百度地图API 或者打开网站 http://lbsyun.baidu.com/
前端vue开发连续签到功能
管乐明的博客
08-10 3200
前端vue开发连续签到功能UI设计图参数说明HTML部分 渲染已经签到过的天数js代码签到功能前端只需要调用两个接口完整代码 UI设计图 参数说明 days_num：已经签到多少天 today：当日是否签到 0.否 1.是 gift_num：积分数量 day_num：当前是第几天 HTML部分 渲染已经签到过的天数 <ul class="signBtnBox"> <li class="signBtnOne" v-for="(item, key, index) in list"
Element-upload手动上传文件以及限制文件类型及大小
管乐明的博客
08-03 1444
Element-upload手动上传文件以及限制文件类型及大小 根据项目需求只能把上传功能做成手动上传（因为其中涉及到与C++通讯） 手动上传只需设置 :auto-upload = "false"
去掉百度地图api左下角百度logo标志或文字
管乐明的博客
04-13 918
去除之前的 去掉文字，只需要在添加css即可 .BMap_cpyCtrl { display:none; } 去掉地图logo，只需添加css .anchorBL{ display:none; } 去除之后
前端开发工作中记住这20个免费的轮子 开发效率提升200%！！！
管乐明的博客
10-23 806
文章目录Vue UI组件库1、Element UI2、vant3、View UIReact UI组件库1、Ant Design2、React Bootstrap3、MATERIAL-UI动画库Animate.css精细化效果组件1、Swiper2、mescroll.js工具类轮子1、lodash.js2、Day.js3、timeago.js4、Echarts5、Markdown6、validator.js7、vue-draggable8、vue-qr9、vue-cropper10、vue-lazyload1
JavaScript，ES6语法制作简易计算器
管乐明的博客
04-21 623
JavaScript，ES6语法制作计算器1、先看效果：2、HTML主体部分3、css样式部分：4、js部分 1、先看效果： 里面所需要的背景图片： 2、HTML主体部分 <div id="counter"> <h2>简易计算器</h2> <div id="counter_content"> <h3><input id="input1" type="text" value="0" disabled="disabled" >&l
移动端开发前端需要注意什么
最新发布
07-27
移动端开发前端需要注意以下几点： 1. 理想视口：为了在移动端有最理想的浏览和阅读宽度，需要设置理想视口。理想视口的宽度应该与设备的宽度一致，可以通过添加meta视口标签来实现。\[1\] 2. 布局方式：在移动端开发中，可以选择不同的布局方式，如流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局等。根据项目需求和开发经验选择合适的布局方式。\[2\] 3. 响应式布局：响应式布局是一种能够适应不同屏幕尺寸的布局方式。通过使用媒体查询来适配不同的屏幕尺寸，使页面在不同设备上都能有良好的显示效果。\[2\] 4. 文件结构：在搭建移动端开发的文件结构时，需要考虑到不同设备的兼容性和性能优化。合理组织文件结构，减少不必要的请求和文件大小，提高页面加载速度。\[2\] 总结起来，移动端开发前端需要注意理想视口的设置、选择合适的布局方式、使用响应式布局和优化文件结构等方面。这些注意事项可以帮助开发者在移动端上实现良好的用户体验。 #### 引用[.reference_title] - *1* *3* [前端开发之移动端基础](https://blog.csdn.net/u013773608/article/details/110735612)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [Web前端开发 移动端开发（快速入门）](https://blog.csdn.net/weixin_46127956/article/details/127800253)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

管乐明

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值