一、关于移动端兼容性
目前针对跨终端的方案,主要分为两大阵营:一套资源Vs两套资源。
第一种是通过响应式或页面终端判断去实现一套资源适配所有终端;
第二种是通过终端判断分别调取两套资源以适配所有终端。
这两种思路我们并不能斩钉截铁的说哪一个更优选,正所谓”合适的才是最好的”。
优势:只需维护一套资源,维护成本较低。
劣势:需加载适配各个终端的各个资源,在不同终端通过响应式布局实现不同展现,部分交互效果需要在页面中做终端判断,代价较大,若图片资源为一套,部分图片在超高分辨率设备(例如iphone系列)下会失真,且在非wifi情况下即使加了延时加载也易出现加载慢的情况。
技术选型:jquery(或原生js等)+ 响应式 + 前端模块加载器(seajs或RequireJS等)+ css预处理器(sass 或less等)。jquery较好的兼容性配合响应式可相对代价较小地实现跨终端。前端模块加载器主要负责按需加载,以提高页面加载速度,css预处理器 的变量、运算、嵌套等特性可大大提高手动计算响应式的效率,妈妈再也不用担心我把比例算错了。当然后两者可参考需求及成本决定是否采用。
优势:可根据不同端做个性设计及个性化信息推送且可按需加载,如移动端可配合重力感应、不同手势做各种炫酷拽效果,pc页面可不受流量限制做适合pc端的效果。
劣势:需维护两套资源,维护成本增加。
技术选型:zepto(或xui等移动端轻量级框架)+ 响应式 + 前端模块加载器 + css预处理器 + 终端适配。zepto作为jquery的移动端版本,依然延续其自身优势,大幅优化了移动端API且摒弃了兼容”非现代浏览器”的冗余代码,成为移动端轻 便可用的js框架代表,对于习惯了jquery的同学来说简直是不二之选!
终端适配目前一般通过ua判断来实现。ua判断可放在服务端也可放在页面中,在代理服务器中做跳转更快、更 准确且不走应用程序层,即使浏览器禁用了js依然可以跳转到相应的地址,同时秉承着公共服务放在服务端这样的云端服务理念,我们选择了通过代理服务器做终端适配。
User-Agent嗅探,即Web浏览器发送一个Web页面或资源请求时,会发送一个User-Agent首部作为HTTP请求的一部分,那么我们就可以在服务器端获取想要的信息,进而判断并引导用户到达相应的页面地址。
二、pc上的网站在移动端上怎么办?
如果把移动端的可视区域(320-768)的话,大部分网站都会因为太窄而显示错乱;所以浏览器默认把viewport设置为一个较宽的值 980px或1024px,至少保证PC网站在移动端上可以显示,只不过出现了横向滚动条而已。
(一)几个概念
1.css像素
2.物理像素
3.分辨率
4.devicePixelRatio
5.layout viewport
6.visual viewport
7.ideal viewport
(二)如何实现屏幕适配
需要用到
<meta name="viewport" content="width=device-width">
meta viewport 中有6个通用属性:
target-densitydpi 在andriod 4.0一下的设备中,不支持设置viewport的width,android 自带浏览器支持设置 target-densitydpi来达到目的;
target-densitydpi = UI-width/device-width*window.devicePixelRation*160
//UI-width: 布局宽度
//device-width:屏幕分辨率宽度 iphone4为640
//target-densitydpi=device-dpi 标示使用设备本身物理屏幕的像素,不会发生默认缩放
miniual-ui ios的safari为meta表天新增的属性,在网页加载是隐藏顶部的地址栏和底部的导航栏
(三)相关代码讲解
//移动页面设计 480*854的比例
//dpi = 480/screen.width*window.devicePixelRatio*160;
//scalevalue = screen.width/480;
//控制适配 分为5种组合
/* width + target-densitydpi(计算出来的) */
<meta name="viewport" content="width=480,target-densitydpi=dpi,minimal-ui">
/* width */
<meta name="viewport" content="width=480,minimal-ui">
/* width+target-densitydpi=device-dpi */
<meta name="viewport" content="width=480,targrt-densitydip=device-dip,minimal-ui">
/* width+initial-scale */
<meta name="viewport" content="width=480,initial-scale=scalevalue,maximum-scale=scalevalue,minimum-scale=scalevalue,minimal-ui">
/* targrt-densitydpi */
<meta name="viewport" content="targrt-densitydpi=dpi,minimal-ui">
//通过顺序设置5次来实现适配 直到
Math.abs(window.innerWidth-480)<=10 表示viewport设置正确了。
(四)横竖屏
js代码控制
window.addEventListener("orientationchange",function () {
This.isOrietation = true;
This.changeOriention();
});
//建议执行横竖屏的事件都通过一个侦听完成,做一个统一的管理;在屏幕横竖屏切换完成之后再执行相应的事件
css控制
//定义横屏显示的样式
@media screen and(orientation:landspace){...}
//定义竖屏显示的样式
@media screen and(orientation:portrait){...}
//某个尺寸的特殊样式 竖屏时宽度为768px 符合一般ipad的条件
@media only screen and(orientation:portrait) and(device-width:768px){...}
参考:http://www.uisdc.com/mobile-compatibility-analysis
http://www.ituring.com.cn/article/130015
文章浏览阅读909次。《人机交互技术》课程介绍人机交互(Human-Computer Interaction, HCI):是研究人、计算机以及它们间相互影响,通过计算机输入、输出设备,以有效的方式实现人与计算机对话的技术;用户界面是人与计算机之间传递、交换信息的媒介和对话接口,是计算机系统的重要组成部分。人机交互与用户界面是两个有着紧密联系而又不尽相同的概念。人机交互强调的是技术和模型,用户界面是计算机的关键组成部分。..._人机交互方式的作用
文章浏览阅读3.2k次,点赞2次,收藏16次。在初步学习网络安全时,暂时了解DOS命令系统及常用命令,以形成一定的框架体系,后续学习中如需要再继续强化。_dos管道命令详解
文章浏览阅读219次。VB管理信息系统开发实战 大学计算机科学与技术专业毕业,从事教育培训两年,程..._管理系统vb教学
文章浏览阅读91次。React-StepPitGuide《React踩坑指南》十行代码九个警告八个错误竟然敢说七日精通六天学会五湖四海也不见如此三心二意之项目经理简直一等下流。自己总结的关于React学习心得,欢迎大家与我交流ReactGithub:TYRMarsgitbook经常出问题,所以迁到自建的站点了。React 基础知识React 版本..._react踩坑指南
文章浏览阅读5.5k次,点赞7次,收藏63次。常用的机器学习与深度学习算法简介1、机器学习1.1 决策树与随机森林1.2 支持向量机(SVM)1.3 k-最近邻算法1.4 朴素贝叶斯分类器2、深度学习2.1 人工神经网络2.2 深度神经网络2.3 卷积神经网络2.4 循环神经网络2.5 自编码器1、机器学习1.1 决策树与随机森林决策树(Decision Tree)是一种将决策流程以树状结构清晰表示的机器学习方法,本质上是通过一系列规则对数据进行分类的过程。图1-决策树随机森林(Random Forest)是通过构建多个决策树对样本进行训_机器学习和深度学习算法
文章浏览阅读95次。简述AOP是面向切面编程(Aspect-Oriented Programming)的简称。它不是一项技术,和平常说的OOP(Object-Oriented Programming)一样,它是一种编程思想。这里不再做更多的名词解释。上图:从这个丑陋的图中可以看出,利用AOP后,OOP的Objects 都可以只专注于自己的事情,而不需要去管用户是否登录以及记录本次操作日志的事情了。 而且关..._adaptinterceptor(
文章浏览阅读217次,点赞4次,收藏3次。GraphQL CLI:简化GraphQL开发的利器项目地址:https://gitcode.com/graphql-cli/graphql-cliGraphQL CLI 是一个强大的命令行工具,旨在帮助开发者更高效地管理和操作他们的GraphQL项目。它是开源的,由GraphQL社区维护,并且完全免费,其目标是统一和优化GraphQL的工作流程。项目简介GraphQL CLI 提供了多样...
文章浏览阅读1.8k次。_形式语义学 入门
文章浏览阅读1.2k次。HTML一、HTML概述1、HTML是一种描述性标记语言,用来描述页面内容的显示方式,如:文字、视频、音频程序等复杂元素。2、HTML文件是一种纯文本文件,以“.html”或“.htm”为后缀。3、HTML的基本组成单位是元素。4、HTML文档结构是由<html>、<head>和<body>这三大元素组成:1)<html>元素..._内容标题是html文档中的文本元素吗
文章浏览阅读733次。Exited(137),docker exec -it 容器名 /bin/bash 无法进入_docker 137
文章浏览阅读2.3k次,点赞4次,收藏27次。java迭代器Iterator讲解_iterator迭代器详解
文章浏览阅读1k次。由于微信引流具备快速性和高效的二次传播性,故众多商家纷纷选择微信推广为主要的推广方式。但在使用微信分享链接和营销方案的过程中经常会遇到分享链接在微信内被拦截从而无法打开或者打开后无法下载文件的情况,导致引流来的用户由于无法打开网页而选择流失。更过分的是,由于都是新用户,故用户即使知道链接无法打开也不会选择反馈,导致问题处理的不及时,错失很多流量。问题分析那么当我们在微信内遇到被拦截的问..._微信转网页下载的文件打不开