HTML5   发布时间:2022-04-25  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了HTML5 Boilerplate:Meta viewport和width = device-width大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在建立一个自适应/响应网站。

关于最近对HTML5BP的改变:

mobile/iOS css revisions

我开始使用:

<Meta 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)。

总而言之,当处于横向模式时,这会缩放@L_489_7@:

<Meta name="viewport" content="width=device-width">

…而且这不:

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

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

我的问题:

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

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

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

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

解决方法

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

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

大佬总结

以上是大佬教程为你收集整理的HTML5 Boilerplate:Meta viewport和width = device-width全部内容,希望文章能够帮你解决HTML5 Boilerplate:Meta viewport和width = device-width所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。