凤凰腾,源质排气管,导游资格考试
本文针对手机设备设计的页面,并非兼容全设备的响应式布局,常见的MobileWeb页面如H5页面、手机页面、WAP页、webview页面等等。在不同尺寸的手机设备上,页面“相对性的达到合理的展示(自适应)”或者“保持统一效果的等比缩放(看起来差不多)。
CRT显示器
CSS像素与屏幕像素1:1同样大小时:
浏览器窗口宽度一定的情况下,把页面放大(Ctrl+),CSS像素(黑色边框)开始被拉伸,此时1个CSS像素大于1个屏幕像素
PPi中的pixel指的是物理(设备)像素。
ppi是每台设备的一个定值,一个固定参数,下图以Samsung Galaxy S4为例
ppi过高带来的问题,相同的图片素材,ppi越高的设备显示越小。下图为一个分辨率像素在屏幕中的位置
由于这样的问题存在,高ppi(高清屏)设备下的UI会采取一定的缩放比例,让文本或素材放大(也就是让分辨率像素或CSS像素放大),下面是CSS像素和物理像素的比例公式:DevicePixelRatio是手机的物理像素与实际使用像素的缩放比(会随着手机默认缩放比和人为缩放浏览器页面改变))
DevicePixelRatio定义如下: window.devicePixelRatio = physical pixels / dips(device-independent pixels即CSS像素)
通过CSS参考像素可以计算出在不同的设备上使用合适的CSS像素大小,使得视觉上一致。
那么问题来了,如何实践这个标准呢?通过使用viewport
<meta name="viewport">
默认情况下,手机屏幕以980px去渲染页面,(下图图像为320px,设备为iphone4)
此时通过设置渲染宽度为320px,即为手机设备的分辨率,此时图像是充满整个区域的
下面为viewport的一般设置
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
另外Viewport还分为两种,Layout Viewport和Visual Viewport
[max-]width: 100%
,背景图像使用background-size
),布局只针对元素进行。以下图为例,分析移动Web开发在页面架构和布局的方法及差异性(效果图为640px)
device-width
,以较小宽度(如 320px)的视觉稿作为参照进行布局代码段
<meta name="viewport" content="width=device-width,initial-scale=1">
px
即可。head头部(根据屏幕宽度来动态生成viewport,生成的 viewport 基本是这样)
<meta name="viewport" content="width=640,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no">
css style
body { width: 640px; margin: 0 auto; }
缩放失效问题需通过 js 动态设定 initial-scale。
var fixScreen = function() { var metaEl = doc.querySelector('meta[name="viewport"]'), metaCtt = metaEl ? metaEl.content : '', matchScale = metaCtt.match(/initial\-scale=([\d\.]+)/), matchWidth = metaCtt.match(/width=([^,\s]+)/); if ( metaEl && !matchScale && ( matchWidth && matchWidth[1] != 'device-width') ) { var width = parseInt(matchWidth[1]), iw = win.innerWidth || width, ow = win.outerWidth || iw, sw = win.screen.width || iw, saw = win.screen.availWidth || iw, ih = win.innerHeight || width, oh = win.outerHeight || ih, ish = win.screen.height || ih, sah = win.screen.availHeight || ih, w = Math.min(iw,ow,sw,saw,ih,oh,ish,sah), scale = w / width; if ( ratio < 1) { metaEl.content += ',initial-scale=' + ratio + ',maximum-scale=' + ratio + ', minimum-scale=' + scale; } } }
文本折行问题
section, p, div, h1, h2, h3, h4, h5, h6, .fix-break { background: tranparent url('about:blank'); word-break: break-all; }
px
为单位。代码段(动态生成 viewport)
不用写 meta 标签,该方法根据 dpr 自动生成,并在 html 标签中加上 data-dpr 和 font-size 两个属性值。一些注意的地方
background-size: contain|cover
来缩放。动态调整 rem 的方法如下:
var fixScreen = function() { var metaEl = doc.querySelector('meta[name="viewport"]'), metaCtt = metaEl ? metaEl.content : '', matchScale = metaCtt.match(/initial\-scale=([\d\.]+)/), matchWidth = metaCtt.match(/width=([^,\s]+)/); if ( !metaEl ) { // REM var docEl = doc.documentElement, maxwidth = docEl.dataset.mw || 750, // 每 dpr 最大页面宽度 dpr = isIos ? Math.min(win.devicePixelRatio, 3) : 1, scale = 1 / dpr, tid; docEl.removeAttribute('data-mw'); docEl.dataset.dpr = dpr; metaEl = doc.createElement('meta'); metaEl.name = 'viewport'; metaEl.content = 'initial-scale=' + ratio + ',maximum-scale=' + ratio + ', minimum-scale=' + scale; docEl.firstElementChild.appendChild(metaEl); var refreshRem = function() { var width = docEl.getBoundingClientRect().width; if (width / dpr > maxwidth) { width = maxwidth * dpr; } var rem = width / 16; docEl.style.fontSize = rem + 'px'; }; //... refreshRem(); } }
无需安装成本,迭代更新容易
移动
常用方案rem
和px
。原生Android下中文字体与英文字体都选择默认的无衬线字体
body { font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; }
设置全局的CSS样式,避免图中的长按弹出菜单与选中文本的行为
a, img { -webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */ } html, body { -webkit-user-select: none; /* 禁止选中文本(如无文本选中需求,此为必选项) */ user-select: none; }
浏览器兼容性:
同步操作
- 使用node.js command prompt 安装BrowserSync
- 在node.js command prompt 在要创建服务器的目录下面执行:browser-sync start --server --files="*" 命令即可,表示创建一个服务器并监听该目录下的文件变动
- 让手机与电脑处于同一局域网下,可以使用电脑分享热点手机连接(如360无线wifi + 网卡)
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
Windows Phone 7编程实践—推送通知(剖析推送通知实现架构)
Esri for Window Phone 7(一) 加载BingMap
浅谈ListBox在Windows Phone 7 中的使用
网友评论