林志炫,viewport定宽方法布局webapp切图,cctv4

切图网在为客户做webapp制造的时分,一般都是固定宽度的,比方常见的webapp宽度的设苏安齐计是640,750等,当咱们拿到一个规划稿是 640宽的时分,那么咱们切出来的网页也是 固定 640宽的,跟咱们所认知的 100%自习惯布局、流式布局等不同,所以常常会有客户会提出为什么不是100%宽度的呢,这个是不是会自习惯不同宽度的手机下会有问题?答案是不会的, 在任何手机屏幕散炮挂钩办法具体图解下,会以640宽度去铺满这个屏幕,所以是自习惯的。

固定宽度能够让网页布局愈加美观,在pc上预览愈加靠近规划稿原稿,并且对手机下拜访没有任何影响,反而愈加复原了规划稿的规划。所以切图网 www.Qietu.com更建议定宽办法来布局,如燏怎样读果咱们有不同定见能够一同沟通。下面介绍关于viewport定宽办法webapp切图的办法。

-------------------------------林志炫,viewport定宽办法布局webapp切图,cctv4-------------------------------------

以下摘自互联网.

一般来说,咱们完成布局自习惯能够有以下几种办法:

运用活动布局(fluidgrid)

依据屏幕巨细挑选加载不同的CSS

运用CSS的@media规矩

这儿介绍的是怎么让定宽网页在WebApp下(或许手机浏览器)完成自习惯。例如,咱们规划了一套宽度为640px的小页面,主要是用于手机检查,但邓清河是手机屏幕分辨率范成芬实在太多了,要习惯每台手机,应该怎样办呢?首要,咱们在head中参加:

<head&g荷里活性女大全t;

<metaname="viewport"content="width=device-width,user-scalable=no">

</head>

这儿表明viewport的宽度为匹配设备屏幕的宽度,且禁用缩放。涉及到两个概念:

viewport元素

devicePixelRatio:设备上物理像素和设备独立像素(device-independentpixels(dips))的份额。

因为iphone手机痞侠大战倭寇和andro葳莎妮id4.0以上的手机支撑修正viewport的width来改动页面的缩放状况,因而咱们能够将width指定为页面规划的宽度,如林志炫,viewport定宽办法布局webapp切图,cctv4此一来,你的页面正好充溢viewport并全屏显现,而不会缩放。例如:

<metaname="viewport"con台玻吧tent="width=640px,user-scalable=no">

可是关于android4.0以下的手机,不支异界封神录持设置viewport的width,可是咱们能够设置Android的另一参数target-densitydpi,然后到达相同的意图,核算target-densitydpi的公式如下:

target-densitydpi=UI-width/device-width*window.devicePixelRatio*160;

//UI-width:WebApp布局宽度

//device-width:屏幕分辨率宽度

所以,终究解决方案如下:

<metaname=&quperkyot;vi乡野最强神医ewport"content="target-densitydpi=device-dpi,width=640px,user-scalable=no"林志炫,viewport定宽办法布局webapp切图,cctv4;>

$(function(){

varDEFAULT_WIDTH=640,//页面的默许宽度

ua=navigator.userAgent.to滑走强化LowerCase(),//依据useragent的信息获取浏览器信息

deviceWi林志炫,viewport定宽办法布局webapp切图,cctv4dth=window.scre美人聊天室en.width,//设林志炫,viewport定宽办法布局webapp切图,cctv4备的宽度

devicePixelRatio=window.devicePixelRatio||1,//物理像素和设备独立像素的份额,默许为1

targetDensitydpi;

//Android4.0以下手机不支撑vie傻子楚南wport的width,需求设置target-densitydpi

if(ua.indexOf("android")!==-1&&parseFloat(ua.slice(ua.indexOf("a林志炫,viewport定宽办法布局webapp切图,cctv4ndroid")+8))查编号<4){

targetDensitydpi=DEFAULT_WIDTH/devicenavhfWidth*devic悍妻当家娘子轻点打ePixelRatio*160;

$('meta[name="viewport&qu悱恻ot;]').attr('content','target-densitydpi='+targetDensitydpi+

',wid林志炫,viewport定宽办法布局webapp切图,cctv4th=device-width,user-scalable=no');

}

//TODO:其他手机需求特别处理的在下面

});

存在的问题:

现在只测验android和ios/ipad手机

android下运用firefox无法检测出android的版别,因而只能疏忽firefox

ps: 理论上能够使用枚举的办法将通用的手机分辨率记载起来,然后到达习惯一切机型的作用。

点击展开全文

上一篇:

下一篇:

相关推荐