HTML5 Boilerplate:Meta viewport和width = device-width

我正在建立一个自适应/响应网站。

关于最近对HTML5BP的改变:

mobile/iOS css revisions

我开始使用:

<@R_301_338@ name="viewport" content="width=device-width">

…我有我的CSS:

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

包括initial-scale = 1时,从垂直旋转到水平(在iPad / iPhone上)导致布局从2列(例如)变为3列(由于meida查询,initial-scale = 1和JS fix for viewport scale bug)。

总而言之,当处于横向模式时,这会缩放页面

<@R_301_338@ name="viewport" content="width=device-width">

…而且这不:

<@R_301_338@ name="viewport" content="width=device-width,initial-scale=1">

注意:在iPad / iPhone上查看HTML5BP website时,您可以看到此放大效果

我的问题:

>这是否成为新的标准(即在横向模式下缩放)?
>我有一段时间向我的同事和老板解释这个变化…他们习惯于在水平模式下看到不同的布局;现在页面缩放和布局保持不变(除了它更大)。任何提示,如何解释这对无知的群众(其中,我可能包括在内)?

@robertc:谢谢!这是非常有益的。

我实际上喜欢没有初始尺度= 1;它是我的同事谁习惯看到布局变化,而不是缩放。我相信我会被迫添加initial-scale = 1只是为了大家(因为没有缩放,看到布局的变化,是他们习惯看到的)。

我刚刚注意到HTML5BP index.html on githubthe website使用< @R_301_338@ name =“viewport”content =“width = device-width”&gt ;;对我来说,这是足够的原因沟渠初始尺度= 1,但是当我尝试解释these things到“非怪人”时,我得到了眉毛。 :D

解决方法

这不是一个新的标准,它是如何总是工作AFAIK。如果将宽度设置为固定的像素数,则将纵向旋转为横向仅更改缩放,因为虚拟像素的数量保持不变。我猜,添加initial-scale = 1是阻止缩放,当你在之间切换 – 这是你的页面的缩放因子不会随着设备旋转更改。如果您最初在横向而不是纵向中加载页面页面是什么样子?

我建议如果你想要的行为,当你指定initial-scale = 1,然后指定initial-scale = 1。 HTML5 BoilerPlate是你应该修改以满足您自己的要求。

相关文章

HTML5不是新事物。自从最初发布(2008年1月)以来,我们一直在使用它的一些功能。后来,我再次仔细查看...
Pointer Events API 是Hmtl5的事件规范之一,它主要目的是用来将鼠标(Mouse)、触摸(touch)和触控笔(...
CSS动画非常的有趣;这种技术的美就在于,通过使用很多简单的属性,你能创建出漂亮的消隐效果。其中代表...
clip-path介绍 clip-path 直译过来就是裁剪路径,使用SVG或形状定义一个HTML元素的可见区域的方法。想象...
语法 必需。动画时长的百分比。 合法的值: 0-100% from(与 0% 相同) to(与 100% 相同) 定义和用法...
基本代码 html代码: 首先定义一些基本的样式和动画: background-size: auto 100%; 这段代码的意思是让...