html5 开发移动网络(移动网络开发的几种方法)
大家好,又见面了,我是你们的朋友全栈君。
最近一直在研究移动手机网站的开发,发现做手机网站没有想象中的那么难。为什么会这么说呢?我们试想下:我们连传统的PC网站都会做,难道连一个小小的手机网站难道都搞不定吗?其实手机网站就是一个微缩版的PC网站罢了!至于为什么觉得难、觉得无从下手。
段亮觉得有以下几点:
一、没有完整的思路和流程
就像做网站的流程一样,如果你能知道它的流程,我相信就不会觉得做手机网站难!真正难的是你没有思路。
二、把html5这门技术想的高深莫测
好像觉得学会用html5+css3做手机网站,就相当于学会了顶尖的绝世武功。其实你错了!不要把html5这玩意想的太高深,其实做手机网站,真正意义上用不到什么的html5的强大功能。(可能对于一些不懂什么技术的小白而言:你的手机网站是用HTML5+CSS3做的啊,简直牛逼呀!能用上目前互联网上最新最前沿的技术。其实明眼人一看,就知道是用什么技术做的。俗话说的好:”外行看热闹,内行看门道“)
好了扯了这么多,下面就说说怎么来开发移动手机网站吧!
基本上开发手机网站,可大致分为两大类。一类是用框架开发手机网站。一类是自己手写手机网站。
一、框架开发手机网站
一般用现在常用的开发框架有:目前Web前端最火的框架(BootStrap)、Jquery mobile..当然可能还有一些移动端开发的框架,这些我就没具体去研究过。
为什么说BootStrap是目前前端最火热的开发框架呢?
因为bootstrap自带响应式布局(栅格系统),而且能做到移动设备优先的原则。
运用bootstrap来开发网站有什么好处呢?
1.不懂设计也可以做网站
就算不懂设计,你的网页在Bootstrap的帮助下,也能拥有超高颜值。它强大的内置样式库让你的作品变成尤物。
主要体现在:字体文件和bootstrap自带的UI样式。(为广大不会UI设计的程序员,提供了福音)
2.上手快
你可以专心解决问题,冗繁的细节都丢给Bootstrap操心。可以做到一次开发,就可适配所有终端,并且能迅速上手并建出网站原型。还提供很多丰富的插件,就算你不会JS,基本能看懂常见的API,网站上的效果,基本能解决。
缺点:
1.不遵循最佳实践
我们在使用Bootstrap时遇到的最大问题之一是你的DOM元素上将拥挤大量的类。这打破了良好的web设计基本规则之一,HTML不再有语义,而且内容和表示不再分离。前端纯粹主义者会觉得这相当令人讨厌,以为它使可扩展性、重用性和维护性遇到了更大的挑战。
2. Bootstrap 太重
直接点说:就是CSS和JS有点点大。CSS压缩后115k,JS压缩后35k
如果你想要使用Bootstrap的所有功能,你应该好好考虑资源的加载时间。当然,对于一些地方这可能不是问题,但是在新西兰互联网不得不横跨太平洋,这时数据达到那儿将是很缓慢的。因此考虑你的目标市场。
相信任何框架都有它的优点,同时也是有它的缺点的。没有一个产品是很完美的,所以根据自身实际情况进行选择。至于一些其它框架暂时不做过多的解释了,相信只要你肯愿意百度一下,就可以找到你想要的答案。
二、手写手机网站
一般我们自己手动开发手机网站的话,基本可以划分两类来做到。一类是通过在网页头部添加meta标签进行实现(网页指html5的格式来开发)。另一类是通过CSS3的Media标签(媒介查询)来实现。不了解媒介查询的朋友,可以看看这篇文章:响应式布局。
在这里我们详细讲解下,利用添加meta标签来做手机网站。
基本在网页头部我们只需添加四个meta标签就可以实现一个手机网站的框架。我一起来看看是哪些meta标签。
1、添加viewport标签
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
详细属性:
width ---- viewport的宽度(width=device-width意思是:宽度等于设备宽度)
height ------ viewport的高度(height=device-height意思是:高度等于设备宽度)
initial-scale ----- 初始的缩放比例
minimum-scale ----- 允许用户缩放到的最小比例
maximum-scale ----- 允许用户缩放到的最大比例
user-scalable ----- 用户是否可以手动缩放
关于viewport的详细原理和知识点,各位就百度吧!在这里我就不做详细的讲解了。
2、禁止将数字变为电话号码
<meta name="format-detection" content="telephone=no" />
一般情况下,IOS和Android系统都会默认某长度内的数字为电话号码,即使不加也是会默认显示为电话的,so,取消这个很有必要!
3、iphone设备中的safari私有meta标签
<meta name="apple-mobile-web-app-capable" content="yes" />
它表示:允许全屏模式浏览,隐藏浏览器导航栏
4、iphone的私有标签
<meta name="apple-mobile-web-app-status-bar-style" content="black">
它指定的iphone中safari顶端的状态条的样式
默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)
另外还有一个个性化的link标签,它支持用户将网页创建快捷方式到桌面时,其图标变为我们自己定义的图标。比如手机腾讯网上的标签:
<link rel="apple-touch-icon-precomposed" href="http://3gimg.qq.com/wap30/info/info5/img/logo_icon.png">
不过腾讯对这个png图标的命名并不规范,常规我们要求文件名应为 apple-touch-icon.png 或 apple-touch-icon-precomposed.png ,前者的命名iOS会为这个图标自动添加圆角、阴影和高亮覆盖层,后者则不会添加这些效果。
手机网站基本框架代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>手机网站</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="author" content="duanliang, duanliang920.com" />
<style>
body{font-size:62.5%;font-family:"Microsoft YaHei",Arial; overflow-x:hidden; overflow-y:auto;}
.viewport{ max-width:640px; min-width:300px; margin:0 auto;}
</style>
</head>
<body>
<div>
大家好!我是段亮,这是我的第一个手机网页哦!
</div>
</body>
</html>
下面是我做的基于微信二次开发的手机页面案例:
点击预览
其实在移动端的开发让我纠结的是在字体单位上的选择。
随着CSS3的兴起,有一种叫rem的单位渐渐的出现在我们的视野中。它是一个相对单位,能实现响应式的那种。它是相对于html根元素来设置当前文字大小,或者宽高的。因为它是一个不固定值,不像PX。听说在PX这个单位在PC和移动的解析不同,所以才使用rem的。这点我也不是很清楚,也请教了一些做手机网站的高手,了解了一些信息。
原来大部分的人依旧是使用PX来布局,rem都用的少。目前来说,就移动端的淘宝首页就是采用rem来作为单位来布局的。关于使用rem单位这个问题以及它的好处:还得需要大神来解答这个问题,毕竟我也只是刚接触。
关于手机网站的调试问题
一般我们采用的:在浏览器调试+真机测试,因为浏览器毕竟只是一个模拟工具,实际开发的话,我们还得用真机去测试。
比如:(Android类手机,iPhone5、5s、6、6Plus…)
而在浏览器上测试,可以chrome(谷歌浏览器)的F12调试工具:有个手机样的小图标,点击就能模拟手机测试。
如下图:
或者用火狐的测试工具:按shift+ctrl+M进行查看。
写在最后:其实等你真正熟悉做手机网站这套流程后,你会发现做手机网站没有你想象的那么难,真正难的是不知道如何去下手。对于移动端的JS效果可能和PC端有些不同,因为移动端有移动端的事件,这也是我为什么老是强调学JS,是学原生JS,而不是学Jquery。我的下篇文章就会讲到”为什么学JS要学原生JS”。(以上均是段亮个人经验,如有不足的地方可以指出,相互学习!)
推荐阅读
-
什么是可用性测试?有效性(Effectiveness)-- 用户完成特定任务和实现特定目标的正确性和完整性程度;效率(Efficiency)-- 用户完成任务的正确性和完整性程度与所用资源(如时间)之比;满意度(Satisfaction)-- 用户在使用产品时的主观满意度和接受程度。 2.如何获得可用性? 可以参考以下原则:Gould、Boies 和 Lewis(1991 年)为以用户为中心的设计定义了 4 个重要原则: 早期以用户为中心:设计者应在设计过程的早期就努力了解用户的需求。 综合设计:设计的所有方面都应同步发展,而不是按顺序进行。使产品的内部设计始终与用户界面的需求保持一致。 早期和持续测试:当今唯一可行的软件测试方法是经验主义方法,即如果实际用户认为设计可行,该设计就是可行的。通过在整个开发过程中引入可用性测试,用户就有机会在产品推出之前对设计提出反馈意见。 迭代设计:大问题往往掩盖了小问题的存在。设计人员和开发人员应在整个测试过程中对设计进行迭代。 3...什么是可用性测试? 可用性测试是根据可用性标准对图形用户界面进行的系统评估。 可用性测试是衡量用户与系统(网站、软件应用程序、移动技术或任何用户操作设备)交互时的体验质量。4.如何进行可用性测试? l 实验室实验
-
html5 开发移动网络(移动网络开发的几种方法)
-
移动网络前端调试页面的几种方法
-
紧急模式问题处理 - 图 1 紧急模式 根本原因分析 应急模式提供了尽可能小的环境,即使无法进入应急模式,也可以在其中修复系统。在应急模式下,系统只安装根文件系统供读取,不尝试安装任何其他本地文件系统,不激活网络接口,只启动一些基本服务。 进入应急模式的原因通常是 /etc/fstab 文件中存在错误,导致文件系统挂载失败。 文件系统中存在错误,导致。 约束和限制 本节适用于 Linux 操作系统紧急模式。程序涉及修复文件系统。修复文件系统有丢失数据的风险,因此请先备份数据,然后再执行修复操作。 处理方法 输入根密码,然后进入修复模式。 在应急模式下,根分区以只读模式挂载。要修改根目录中的文件,需要执行以下命令以读写模式重新挂载根分区。# mount -o rw,remount / 请执行以下命令首先检查 fstab 文件是否有误,然后尝试挂载所有未挂载的文件系统。# mount -a 如果挂载点不存在,请创建一个挂载点。 如果不存在此类设备,请注释或删除挂载行。 如果指定了不正确的挂载选项,请将挂载参数更改为正确的参数。 如果没有发生错误,但出现 UNEXPECTED INCONSISTENCY;RUN fsck MANUALLY 消息(通常是由文件系统错误引起的),请跳至第 7 步。 执行以下命令打开 /etc/fstab 以修改相应的错误。# vi /etc/fstab /etc/fstab 文件包含以下字段,以空格分隔:[文件系统] [dir] [type] [options] [dump] [fsck] 表 1 /etc/fstab 参数 说明 参数 说明 [文件系统] 要挂载的分区或存储设备。 文件系统]列建议以 UUID 的形式写入。执行 blkid 命令可查询设备文件系统 UUID。 参考格式如下: # <device> <dir> <type> <options> <dump> <fsck>; UUID=b411dc99-f0a0-4c87-9e05-184977be8539 /home ext4 defaults 0 2 使用 UUID 的好处是,它们与磁盘顺序无关。如果你在 BIOS 中更改了存储设备的顺序,或重新插入了存储设备,或者因为某些 BIOS 可能会随机更改存储设备的顺序,那么使用 UUID 会更有效率。 [文件系统] 文件系统]的挂载位置。 类型 挂载设备或分区的文件系统类型,支持多种不同的文件系统:ext2、ext3、ext4、reiserfs、xfs、jfs、smbfs、iso9660、vfat、ntfs、swap 和 auto。 设置为自动类型后,挂载命令会猜测所使用的文件系统类型,这对 CDROM 和 DVD 等移动设备非常有用。 选项 挂载时要使用的参数,有些参数是特定文件系统特有的。例如,默认值参数使用文件系统的默认挂载参数,ext4 的默认参数为:rw、suid、dev、exec、auto、nouser、async。 有关更多参数,请执行以下命令查看 man 手册:# man mount
-
旷视天元开源图像比对工具 MegSpot,助力图像算法研发 - 1.多样化图像比对:可提供叠加比对、拖拽比对等多种比对方式,支持缩放、移动等同步操作,并可生成 GIF 保存比对结果。2. 2.专业呈现:支持像素级图像查看、图像直方图、RGB 查看;支持预览亮度、对比度、饱和度、灰度等指标。3. 视频对比:Cognizant Megapixel 可提供多种图像对比方法,如拖放对比等。 3.视频对比:除了支持视屏的所有图像对比功能外,CCTV MegSpot 还支持同步回放、回放暂停和快进、回放速度设置等功能。 4.跨平台支持:CCTV MegSpot 提供对 Mac、Linux 和 Windows 系统的跨平台支持,借助 Electron 框架,可以低成本完成跨平台应用的开发,并保证各平台体验的一致性。 此外,央视网MegSpot支持跨平台自动更新和数据持久化,确保用户体验的连续性,并支持中、英、日三种语言:MegSpot为大尺寸图像文件的对比提供了本地解决方案。 MegSpot 是一种用于比较大型图像文件的本地解决方案。
-
Java 类加载器的作用 - 简介:类加载器是 Java™ 中一个非常重要的概念。类加载器负责将 Java 类的字节码加载到 Java 虚拟机中。本文首先详细介绍了 Java 类加载器的基本概念,包括代理模型、加载类的具体过程和线程上下文类加载器等。然后介绍了如何开发自己的类加载器,最后介绍了类加载器在 Web 容器和 OSGi™ 中的应用。 类加载器是 Java 语言的一项创新,也是 Java 语言广受欢迎的重要原因之一。它允许将 Java 类动态加载到 Java 虚拟机中并执行。类加载器从 JDK 1.0 开始出现,最初是为了满足 Java Applets 的需求而开发的,Java Applets 需要从远程位置下载 Java 类文件并在浏览器中执行。现在,类加载器已广泛应用于网络容器和 OSGi。一般来说,Java 应用程序的开发人员不需要直接与类加载器交互;Java 虚拟机的默认行为足以应对大多数情况。但是,如果遇到需要与类加载器交互的情况,而您又不太了解类加载器的机制,就很容易花费大量时间调试异常,如 ClassNotFoundException 和 NoClassDefFoundError。本文将详细介绍 Java 的类加载器,帮助读者深入理解 Java 语言中的这一重要概念。下面先介绍一些基本概念。 类加载器的基本概念 顾名思义,类加载器用于将 Java 类加载到 Java 虚拟机中。一般来说,Java 虚拟机以如下方式使用 Java 类:Java 源程序(.java 文件)经 Java 编译器编译后转换为 Java 字节代码(.class 文件)。类加载器负责读取 Java 字节代码并将其转换为 java.lang 实例。每个实例都用来表示一个 Java 类。通过该实例的 newInstance 方法创建该类的对象。实际情况可能更加复杂,例如,Java 字节代码可能是由工具动态生成或通过网络下载的。 基本上,所有类加载器都是 java.lang.ClassLoader 类的实例。下面将详细介绍这个 Java 类。 java.lang.ClassLoader 类简介 java.lang.ClassLoader 类的基本职责是根据给定类的名称为其查找或生成相应的字节码,然后根据这些字节码定义一个 Java 类,即 java.lang.Class 类的实例。除此之外,ClassLoader 还负责加载 Java 应用程序所需的资源,如图像文件和配置文件。不过,本文只讨论它加载类的功能。为了履行加载类的职责,ClassLoader 提供了许多方法,其中比较重要的方法如表 1 所示。下文将详细介绍这些方法。 表 1.与加载类相关的 ClassLoader 方法
-
澎湃新闻对话腾讯丁珂:从 "治已病 "到 "治未病",企业需快速构建 "安全免疫力"--丁珂指出,对企业而言,安全不是成本而是生命线 丁珂指出,对企业而言,安全不是成本而是生命线,也是商业 "硬币 "的另一面。在数字智能化的新阶段,发展驱动安全建设已成为普遍共识,企业需要转变安全思维,从被动建设到主动防御,构建一套新的安全范式和框架,以更加积极、主动的安全观来提升数字安全免疫力,以 "治未病 "的理念取代 "治已病",前置安全,快速构建 "安全免疫力"。对 "已病",前置预判,及时应对处置安全风险,才能维护品牌价值,保障健康发展。 与此同时,安全建设还普遍存在 "不知道往哪投、怎么投 "的痛点。对此,腾讯安全提出,企业可以按照数字安全免疫模型的框架进行安全全局部署,重点在业务安全、数据安全、安全运维管理、边界安全、终端安全、应用开发安全等薄弱环节的关键领域注入 "免疫增强针"。 今年进入公众视野的AIGC还在产业化、产品化的过程中,但大量攻击者已经利用它生成攻击脚本、钓鱼邮件,甚至伪造身份进行诈骗。"人工智能本身是否安全,会不会让网络更不安全? 腾讯安全研究认为,AIGC的风险主要集中在 "无法解释 "和 "无法追踪 "的特点上,但这在技术上是能够找到应对方法的。丁珂谈到,AIGC作为生产力的巨大提升,确实会带来更复杂的攻防态势和更大的防御难度。但任何新技术都要经历这样的周期。而法律法规也会随着技术的演进而不断更新,使新技术的发展更加规范和健全。 丁珂认为,随着我国网络安全法律法规体系的不断完善,合规性将给企业推进网络安全带来很大的推动力,并很直观地展现在需求端。未来,伴随着数据要素市场的建立或企业对数据价值的挖掘,也将带动数据安全市场的快速增长。 对于腾讯安全的商业逻辑和运营,丁珂表示,不谋求建立竞争壁垒,而是期望与生态共同发展,腾讯安全希望通过能力开放,实现安全与业务相伴的生态模式。 谈到未来,丁磊表示,安全领域已经进入加速发展期,在蓝海中会持续关注很多新的业务领域,希望孵化出新的商业模式,腾讯安全团队也会持续关注并抓住机会做好产品。 以下为采访实录(在不改变原意的基础上略有删减): 冲浪新闻:当前,以人工智能、大数据等新技术为驱动的第四次工业革命正向纵深推进,给人类生产生活带来深刻变革。而互联网作为新技术的载体,面临的安全挑战不仅数量越来越多,形式也越来越复杂。从互联网安全从业者的角度,腾讯观察到近年来国内外网络安全形势发生了哪些变化?这些变化呈现出怎样的趋势?
-
Android开发遇到问题:无法进行CLEARTEXT通信,网络禁止该操作的解决方法
-
从入门到精通:使用HTML5、CSS3和移动Web进行前端开发的笔记(第二部分)