手机屏幕的宽度也在切换,手机屏幕的宽度也在

时间:2020-02-29 22:19来源:澳门美高梅游戏
近期刚做的一个手机项目,需求方要求选项卡在窄屏和宽屏自适应,刚开始觉得挺纠结的,后面结合网上的一些资料自己研究了下,分享给大家: 从网页选项卡诞生的那一天起,凭借其

近期刚做的一个手机项目,需求方要求选项卡在窄屏和宽屏自适应,刚开始觉得挺纠结的,后面结合网上的一些资料自己研究了下,分享给大家:

从网页选项卡诞生的那一天起,凭借其紧凑的布局和方便的切换方式,就成为各大门户必用的设计元素。让我们来看看这些五花八门的选项卡吧

开发

其实从网页选项卡诞生的那一天起,凭借其紧凑的布局和方便的切换方式,就成为各大门户必用的设计元素。

美高梅集团手机版 1

过去几年来,浏览器开发工具一直是Web开发者最得力的工具。它能够与Web浏览器和谐相处,允许我们在当前窗口中实时地操作DOM元素、CSS样式和JavaScript,以及获取一些其他的有用信息。

规则的宽度–比如150px、300px…合适的选项卡数量:2个、4个…使这些选项卡都恰好能平分宽度,在各大浏览器中完美呈现。

规则的宽度–比如150px、300px…合适的选项卡数量:2个、4个…使这些选项卡都恰好能平分宽度,在各大浏览器中完美呈现。

以前开发者使用Firefox的一个名叫Firebug的扩展,来开发和调试他们的网站。但是最近,各个浏览器都开发了一套它们自己的工具,并且每一个都有自己的优势和劣势。如今很难想像没有这些方便的工具,如何来构建一个网站。

忽然有一天,当你的网站需要移植到iPhone,或是其他移动设备上,你得在一个宽度是320px–并且随时有可能切换为480的屏幕上设计这样一组切换卡时,问题就来了。

忽然有一天,当你的网站需要移植到iPhone,或是其他移动设备上,你得在一个宽度是320px–并且随时有可能切换为480的屏幕上设计这样一组切换卡时,问题就来了。

激活开发工具通常是按下“F12”键(Mac系统为 Cmd + Option + I ),或通过右键点击页面,选择弹出菜单中的“审查元素”。

在手机,这种资源有限的移动设备上设计网页的的第一原则是什么?那就是充分利用屏幕。我们的网页两边不再会有几十、几百像素的空隙—取而代之的是仅仅几个像素,在这个例子里,这个数值是4——当然你也可以取其他数值,但是问题还是同样会存在的;随着方向改变,手机屏幕的宽度也在切换,你的页面内容应该自适应这种变化,仍然充满整个屏幕。

在手机,这种资源有限的移动设备上设计网页的的第一原则是什么?那就是充分利用屏幕。我们的网页两边不再会有几十、几百像素的空隙—取而代之的是仅仅几个像素,在这个例子里,这个数值是4——当然你也可以取其他数值,但是问题还是同样会存在的;随着方向改变,手机屏幕的宽度也在切换,你的页面内容应该自适应这种变化,仍然充满整个屏幕。

浏览器 开发工具集 类型 文档
Chrome Developer Tools 集成 Documentation
Firefox Firebug 扩展 Documentation
Internet Explorer Developer Toolbar 集成 Documentation
Opera Dragonfly 集成 Documentation
Safari Developer Tools 集成 (默认关闭) Overview

这时,我们的选项卡宽度就不能是一个固定值,而要使用百分比了。对于2、4、5这样能被100%整除的数,这个取值很容易,每个选项卡的宽度就是50%、25%、20%;对于3、6、7这样不能整除的数,应该怎么办呢?哈,幸好我们还有一点数学基础,以一组3个选项卡为例:33.3%+33.3%+33.4%这样的分法也不错,加起来能够凑到100%,选项卡之间0.1%的宽度差,应该是0.3-0.4像素,可以忽略。好,让我们看看这样的分法结果如何?

美高梅集团手机版 2

你充分发挥了这些工具的潜力吗?开发工具最大的特点就是很容易使用,但结果就是开发者们常常错过了它们所提供的大部分功能。受到Paul Irish 和 Pavel Feldman 视频谈话的启发,我列出了一个有关开发控制台“秘密”的列表。我不指望它们中的每一个都对你来说是未知的,只希望它们中的某一些能够有助你成为一个更好的Web开发者。

FireFox、ie下,如上图,非常和谐。

这时,我们的选项卡宽度就不能是一个固定值,而要使用百分比了。对于2、4、5这样能被100%整除的数,这个取值很容易,每个选项卡的宽度就是50%、25%、20%;对于3、6、7这样不能整除的数,应该怎么办呢?哈,幸好我们还有一点数学基础,以一组3个选项卡为例:33.3%

如果你有更多的“秘密”,请自在地在文章末尾留言——一旦我确认了,我会及时更新这篇文章。我也很想知道你哪个开发控制台是你首要的开发工具,也可以直接在下面留言。

Safari和Chrome下:

  • 33.3 + 33.4%这样的分法也不错,加起来能够凑到100%,选项卡之间0.1%的宽度差,应该是0.3-0.4像素,可以忽略。好,让我们看看这样的分法结果如何?

控制台选项卡

哈哈,好像就不那么完美了。在选项卡数量为3、5个时,我们发现选项卡比下面的内容宽度短了两三个像素,这——是为什么呢~~?–小沈阳问。

FireFox、ie下,如上图,非常和谐。

引用当前元素

让我们先来看看这些选项卡的html代码结构:

Safari和Chrome下:

Chrome, Firefox, Opera, Safari – 如果在“元素”选项卡中,你有一个元素正被选中的话,你可以通过引用“$0”来你的代码中调用它。比如,为了看到你选中元素的内容,你可以输入 “$0.innerHTML”。在Chrome和Safari中,你可以通过按下“Esc”键,立即从其他选项卡切换到控制台(开发工具打开了的情况下)。在Firebug中,控制台通过点击选项卡左侧的图标,或按下Ctrl

  今日要闻 直播大厅 今日要闻  

美高梅集团手机版 3

  • Shift + L 来切换(Mac 下是 Cmd + Shift + L )。

其中,包围在最外面的div.w320,规定的是这个模块的宽度,这里模仿iPhone竖屏时的宽度320px—横屏时就是w480。这里我们给页面两边留的空隙是4px,有效内容宽度是312px。

哈哈,好像就不那么完美了。在选项卡数量为3、5个时,我们发现选项卡比下面的内容宽度短了两三个像素,这——是为什么呢~~?–小沈阳问。

美高梅集团手机版 4

.w320{width:312px; padding:0 4px; margin:5px 0;}

让我们先来看看这些选项卡的html代码结构:

在Opera中,你可以用“$1”往前引用元素。在Chrome和Safari中,你可以用“$1~$4”往前引用元素。

接下来,包围这组3个选项卡的ul.tab3,定义了每个选项卡的宽度:(再次感谢iPhone,感谢CSS3,让我能用上:last-child这样的高级选择器。)

<div> <ul> <li><a href="#">今日要闻</a></li> <li><a href="#">直播大厅</a></li> <li><a href="#">今日要闻</a></li> </ul> <div></div></div>

使用console.log同时输出多个值和对象

.tab3 li{float:left;width:33.3%;}.tab3 li:last-child{width:33.4%;}

其中,包围在最外面的div.w320,规定的是这个模块的宽度,这里模仿iPhone竖屏时的宽度320px—横屏时就是w480。这里我们给页面两边留的空隙是4px,有效内容宽度是312px。

所有浏览器–我们都知道,console.log()方法用来输出调试信息到控制台时非常有用,尤其是与alert相比。但是当你想要输出一个字符串紧跟着一个对象时,它输出的形式会让人生烦。比如使用console.log('message:' + $('#message'))美高梅集团手机版,将仅仅告诉你消息是一个对象(*译注:可能输出结果是“message:[object Object]”),并且如果这个过程在一个循环体中的话,对象的表示让人困惑。

理想情况下,这种划分的结果是怎样的呢?让我们看这个表格:

.w320{width:312px; padding:0 4px; margin:5px 0;}

console.log()实际上可以接收多个参数,所以你可以同时输出字符串和对象:console.log('message:',$('#message'));或者其他你能想到的JavaScript类型组合。

但是,浏览器实际是如何解析这个百分比的呢?通过Firebug查看Firefox下这个宽度的被计算出的值是:

接下来,包围这组3个选项卡的ul.tab3,定义了每个选项卡的宽度:(再次感谢iPhone,感谢CSS3,让我能用上:last-child这样的高级选择器。)

美高梅集团手机版 5

以上取值是在Firebug的“布局”模块下看到的高度值;而在“计算出的样式”下看到的,是跟表1接近的数值,上表中的值可以近似看成是计算值四舍五入后的一个整数——但Firefox的实际表现跟计算值还是有关系的,有时即使这个布局值已满足了,仍然会出问题。

.tab3 li{float:left;width:33.3%;}.tab3 li:last-child{width:33.4%;}

你可以用console.warn()输出警告消息;用console.error()输出错误消息;用console.info()输出信息消息。你也可以使用console.assert()来检测表达式为true或false。

我们还是主要来看iPhone和Android上的自带浏览器又是怎么解析的。通过Safari和Chrome自带调试工具,我们看到这两种webkit内核浏览器对这一宽度的解析是一样的:

理想情况下,这种划分的结果是怎样的呢?让我们看这个表格:

(感谢Masklinn提供了此项信息)

实事再次证明,一个好的开发利器对我们的工作帮助是巨大的。从这组数据我们发现,原来Safari和Chrome对这个宽度的取值跟Firefox是不一样的,并非四舍五入的取法,而是直接忽略小数部分,保留整数部分!宽度为33.3%的选项卡比实际估计值少了1px,这就是上图中选项卡宽度比内容宽度短了几个像素的原因。事实上,在查看了5个选项卡后,发现也存在同样的问题。

美高梅集团手机版 6

重用JavaScript命令

现在要做的就是要找到一个或几个合适的值,按照这种计算方法能使几个选项卡宽度之和等于总宽度——同时在纵向情况下。

但是,浏览器实际是如何解析这个百分比的呢?通过Firebug查看Firefox下这个宽度的被计算出的值是:

所有浏览器–如果你输入过一条命令到JavaScript控制台,并且你又想重新运行它,只要简单地按下方向键“↑”来回滚你调用过的命令就可以了。

还是以3个选项卡为例,假设我们的划分法是前2个选项卡宽度一样,最后一个跟前2个稍微有点差别——我们已经看出来,想找到三个完全相等的整数凑起来等于472是不可能的了。

美高梅集团手机版 7

保持

对Safari浏览器,要满足的是:

以上取值是在Firebug的布局模块下看到的高度值;而在计算出的样式下看到的,是跟表1接近的数值,上表中的值可以近似看成是计算值四舍五入后的一个整数——但Firefox的实际表现跟计算值还是有关系的,有时即使这个布局值已满足了,仍然会出问题。

Chrome,Firefox–Firebug 控制台上方有一个很明显的“保持”(Persist)按钮,但Chrome中被稍微隐藏掉了——需要右键点击控制台,在弹出的右键菜单中选择“Preserve Log upon Navigation”选项。

(注意,每个括号的数值只取整数部分,X和Y越相近越好,并且应在4位小数以内,更精确下去就没什么用了。)

我们还是主要来看iPhone和Android上的自带浏览器又是怎么解析的。通过Safari和Chrome自带调试工具,我们看到这两种webkit内核浏览器对这一宽度的解析是一样的:

*译注:保持的作用是让控制台在刷新页面后仍然保留已输出的控制台信息。

好吧,相信万能的机器,总是什么都能做出来的。运行以上程序,一下就输出了几百组结果,X取值从-33.06%—33.47%,Y从33.48%—33.4%,从中选出最接近的1组:

美高梅集团手机版 8

查看对象源

x=33.47%y=33.48%

.tab3 li{float:left;width:33.47%;}.tab3 li:last-child{width:33.48%;}

实事再次证明,一个好的开发利器对我们的工作帮助是巨大的。从这组数据我们发现,原来Safari和Chrome对这个宽度的取值跟Firefox是不一样的,并非四舍五入的取法,而是直接忽略小数部分,保留整数部分!宽度为33.3%的选项卡比实际估计值少了1px,这就是上图中选项卡宽度比内容宽度短了几个像素的原因。事实上,在查看了5个选项卡后,发现也存在同样的问题。

Firefox–Firefox支持toSource()方法,这意味着在Firebug中可以直接调用这个方法来打印一个对象的字符串表示。

大功告成!iPhone和Android自带浏览器都表现完美了。

现在要做的就是要找到一个或几个合适的值,按照这种计算方法能使几个选项卡宽度之和等于总宽度——同时在纵向(312px)和横向(472px)情况下。

美高梅集团手机版 9

[再提一点,对Firefox浏览器要满足的条件如下:

还是以3个选项卡为例,假设我们的划分法是前2个选项卡宽度一样,最后一个跟前2个稍微有点差别——我们已经看出来,想找到三个完全相等的整数凑起来等于472是不可能的了。

改变frame

基本上就是2X+Y=1,而通过程序运算,我们发现找不到这样一组4位以内的数值能同时满足Firefox和Safari的条件,好在目前在高端机的网页上,我们还不需要兼容Firefox——如果有谁知道-moz或-webkit设置宽度的私有属性,请告诉我,可以分别给他们定义宽度。]

对Safari浏览器,要满足的是:

Firefox–从控制台直接运行JavaScript命令是很有用的,但是如果你页面用了iframe内容的话,就变得麻烦了。幸运的是,用下面的“cd”命令能够进入到指定的iframe环境,得以重新运行你的命令:

这时,有一个弱弱的声音在问:但是,请问,请问,我们每次都要这么痛苦么!

(312*X) + (312*X)+(312*Y)=312,同时(472*X) + (472*X)+(472*Y)=472

cd(window.frames['frameName']);

在经历了这一番死去活来的推理计算后,一直觉得如鲠在喉,心有不甘。突然有一天,脑子里灵光一现,柳暗花明又一村…让我们换个思路吧:一定要给每个选项卡定义精确宽度么?能不都定义么?如果我们只定义其中前N-1个,而让最后一个自适应会如何?像这样:

(注意,每个括号的数值只取整数部分,X和Y越相近越好,并且应在4位小数以内,更精确下去就没什么用了。)

*译注:比如cd(window.frames[0]),它会进入第一个iframe的执行环境,并显示一条info消息:["Current window:", Window sample.com];同时,返回上层可以使用:cd(parent)

.tab3 li:not{float:left;width:33.33%;}.tab3 li:last-child{margin-left:66.66%;}

解这样的方程式,有点类似哥德巴赫猜想了,好像有必要写个程序来搞定。幸好这一次,我们有强大的笨笨熊童鞋,写出了这样一段程序:

Chrome–Chrome允许你用一个不同的方式来改变frame,点击控制台底部的下拉菜单进行切换:

世界顿时简单了!Firefox、Safari一次被搞定——ie下用,稍作修改即可。不论5个、7个,一个道理:前N-1个取最接近平均值的百分比,最后一个自适应,填充剩余空间。

public class test1 { private static float decimal = 0.0001f;public static void main(String[] args) { int count = 1; int result_x = 0; int result_y = 0; for (float x = 0.33f; x < 0.34f; x = x + decimal) { for (float y = 0.33f; y < 0.34f; y = y + decimal) { if (((Math.floor(312 * x) + Math.floor(312 * x) + Math.floor(312 * y)) == 312) && ((Math.floor(472 * x) + Math.floor(472 * x) + Math.floor(472 * y)) == 472) ) { System.out.printf("x==>%.4f,y==>%.4fn" ,x, y); } } } System.out.println("result_x==>" + result_x + ",result_y==>" + result_y);}}

美高梅集团手机版 10

其实这个问题大家应该都会遇到吧,希望看完能受益匪浅,再次也感谢腾讯MXD。

好吧,相信万能的机器,总是什么都能做出来的。运行以上程序,一下就输出了几百组结果,X取值从-33.06%—33.47%,Y从33.48%—33.4%,从中选出最接近的1组:

Opera–Opera中,控制台和文档选项卡都存在一个用来切换frame的下拉菜单——控制台中的那个下拉菜单仅在有frame可供选择时才显示:

x=33.47%y=33.48%

美高梅集团手机版 11

好了,给CSS设置:

(感谢Paul Irish和Daniel提供此项信息)

.tab3 li{float:left;width:33.47%;}.tab3 li:last-child{width:33.48%;}

直接复制你的代码到剪贴板

大功告成!iPhone和Android自带浏览器都表现完美了。[再提一点,对Firefox浏览器要满足的条件如下:(312*X)

Chrome,Firefox,Safari–在控制台中使用copy()命令,以内容作参数,将直接复制内容到剪贴板。

  • (312*X)+(312*Y)=312,同时(472*X) + (472*X)+(472*Y)=472,基本上就是2X+Y=1,而通过程序运算,我们发现找不到这样一组4位以内的数值能同时满足Firefox和Safari的条件,好在目前在高端机的网页上,我们还不需要兼容Firefox——如果有谁知道-moz或-webkit设置宽度的私有属性,请告诉我,可以分别给他们定义宽度。]这样就行啦!

让浏览器做计算

这时,有一个弱弱的声音在问:但是,请问,请问,我们每次都要这么痛苦么!好,问的好!

所有浏览器–这个技巧很有意义,但令人惊讶的是会有多少人不这么去用它。当你想快速知道一个数学计算的答案(比如,一个456像素宽度的容器分三栏,每栏有多宽?),你不需要打开一个计算器,直接在控制台输入就能立即返回答案。顺便说一下,答案是152。

在经历了这一番死去活来的推理计算后,一直觉得如鲠在喉,心有不甘。突然有一天,脑子里灵光一现,柳暗花明又一村…让我们换个思路吧:一定要给每个选项卡定义精确宽度么?能不都定义么?如果我们只定义其中前N-1个,而让最后一个自适应会如何?像这样:

*译注:这又不是Bot,O_O作者应该是指直接在控制台输入表达式:456/3

.tab3 li:not(:last-child){float:left;width:33.33%;}.tab3 li:last-child{margin-left:66.66;}

脚本选项卡

世界顿时简单了!Firefox、Safari一次被搞定——ie下用,稍作修改即可。不论5个、7个,一个道理:前N-1个取最接近平均值的百分比,最后一个自适应,填充剩余空间。正所谓大巧无术、大道至简,换一种思路,海阔天空。

页面所有运行脚本安身的地方,这个选项卡包含了一个下拉菜单,让你可以选择你想要调试的脚本。

编辑:澳门美高梅游戏 本文来源:手机屏幕的宽度也在切换,手机屏幕的宽度也在

关键词: