当前位置:首页 > 行业动态 > 网站代码是万能的吗?

网站代码是万能的吗?

2019-07-18 来源:本站原创

制作的移动网页通常根据960 * 640规范进行设计。重新开发时,通常会通过将页面大小减半来重新开发。



那么,既然我们需要将它减半并重新开发,为什么不直接设置width = 640然后根据设计草案的大小来开发它?

对于第一种方法,我可以暂时想到图片减少一半后的好处,我不知道是什么其他原因提示你使用width = device-width。

这涉及移动设备的屏幕尺寸(ios,android)。设备宽度是指设备的物理宽度。宽度是页面宽度。这与更多设备兼容。当然,仅视口标签是不够的。它还需要响应Media Query进行设计。

通过将该句子添加到网页的,网页的宽度可以自动适应移动屏幕的宽度。其中:width = device-width:设备屏幕的宽度为initial-scale = 1.0:初始缩放比率minimum-scale = 0.5:最小缩放比率maximum-scale = 2.0:最大缩放比率user-scalable = yes :用户可以调整缩放比例

手机的屏幕必须具有各种分辨率。如果您只修复640,则无法看到其他手机分辨率的效果。

视网膜屏幕的分辨率,例如960 * 640,并不是所有的视网膜屏幕。

为了使两个页面都能正常显示,视网膜屏幕主机的浏览器会做一些“特殊操作”(例如,如果你什么都不做,只要设置一个宽度,你会发现结果是意外的。我建议你在iPhone 5S上试用它,分辨率为1136 * 640,但你不要试图用Meta绘制96 * 640的div。

真正的原因是一个标签适合960 * 640和480 * 320以及其他标签(例如计算机,有时使用计算机或iPad来浏览移动网页)

您可以编写一个JS页面来计算浏览器的渲染宽度,您会发现iPhone浏览器认为其宽度仅为320px

添加宽度=设备宽度,字体大小将适合阅读。当您访问手机上的某些网站时,您会看到与计算机上相同的页面。字体非常小,您需要放大才能清楚地看到它。这没有width = device-width。

如果布局和字体都正确,则无需缩放。

Top↑