一个方案-适配所有移动端网页

edgardeng 发布于2019-08-21 14:46 / 2735人阅读

摘要：做过移动端网页的都知道，在一些高要求的移动网页上解决，的屏幕适配问题上花了不少功夫，但有时候还是不尽满意，各种设备上显示还有稍微有一点差距的。初始化的缩放比例，这个属性和中有异曲同工之妙。最后附一个极细边框线的教程。

做过移动端网页的都知道，在一些高要求的移动网页上解决Iphone5、6、6p，的屏幕适配问题上花了不少功夫，但有时候还是不尽满意，各种设备上显示还有稍微有一点差距的。

我曾今也尝试了很多办法，也参考了别人加的思路，有点用js，有的用媒体查询，有的用一些比较新的单位rm、rem等等...... 我觉得还是很麻烦，难道就没有一个可以一行代码觉接问题的方案吗？经过我各种的尝试之后终于有了，目前阶段还没发现bug，如果有问题，还请不吝赐教!

相信这一段代码是在移动端上必须的一段，大概的意思大家也都知道
width=device-width：让宽度=设备缩放之后的宽度，就是320、360、375、414这些。
initial-scale=1：初始化的缩放比例1，这个属性和css中transform: scale(1);有异曲同工之妙。
minimum-scale=1：最小缩放比例，相当于你给div设置mix-height一样，带有限制。
maximum-scale=1：最大缩放比例，同上，不说了。
user-scalable=no：是否允许用户使用双指进行缩放，（默认不允许）。

看了这些，我就想 width=device-width 我就不能设置一个固定值吗？width=320，经过我的测试，发现是可以的。

哈哈哈！完美解决，经过我长期的实验，这里有一个坑，就是 width=固定宽度之后是不能写 initial-scale=1 的，（写了之后在有些浏览器中不行，所以建议不写）。

最后附一个1px极细边框线的教程。大多数的前端的设计图应该都是640或者720的宽度，当我们写border:1px的时候，实际上是物理相似2px，这种情况平时做直线的时候勉强可以应付，transform: scaleY(0.5);这样看起来就洗了很多，但是做圆角的按钮的时候就力不从心了，而且大量使用transform 的代码也不是很美观，这个时候我们可以
这样：

你没看错，就是640，和设计图的尺寸一模一样，每次大的值都不用在除以2了，有的时候一个 25除以2的时候就是不是还在纠结是写12呢还是13呢？这样写的网页实现在手机上运行的效果看起来会细腻很多。

GPU云服务器云服务器移动端适配方案移动端适配移动端适配 js 移动适配

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88026.html

一个方案 - 适配所有移动端网页

摘要：做过移动端网页的都知道，在一些高要求的移动网页上解决的屏幕适配问题上花了不少功夫，但有时候还是不尽满意，各种设备上显示还有稍微有一点差距的。做过移动端网页的都知道，在一些高要求的移动网页上解决Iphone5、6、6p的屏幕适配问题上花了不少功夫，但有时候还是不尽满意，各种设备上显示还有稍微有一点差距的。我曾今也尝试了很多办法，也参考了别人加的思路，有的用js，有的用媒体查询，有的用...

Jingbin_ 2019-08-21 11:19 评论0 收藏0
一个方案-适配所有移动端网页

摘要：做过移动端网页的都知道，在一些高要求的移动网页上解决，的屏幕适配问题上花了不少功夫，但有时候还是不尽满意，各种设备上显示还有稍微有一点差距的。初始化的缩放比例，这个属性和中有异曲同工之妙。最后附一个极细边框线的教程。做过移动端网页的都知道，在一些高要求的移动网页上解决Iphone5、6、6p，的屏幕适配问题上花了不少功夫，但有时候还是不尽满意，各种设备上显示还有稍微有一点差距的。我...

cnsworder 2019-08-29 11:32 评论0 收藏0
一个方案-适配所有移动端网页

摘要：做过移动端网页的都知道，在一些高要求的移动网页上解决，的屏幕适配问题上花了不少功夫，但有时候还是不尽满意，各种设备上显示还有稍微有一点差距的。初始化的缩放比例，这个属性和中有异曲同工之妙。最后附一个极细边框线的教程。做过移动端网页的都知道，在一些高要求的移动网页上解决Iphone5、6、6p，的屏幕适配问题上花了不少功夫，但有时候还是不尽满意，各种设备上显示还有稍微有一点差距的。我...

lixiang 2019-08-01 15:57 评论0 收藏0
懒人必备的移动端定宽网页适配方案

摘要：如何以不变应万变，用简简单单的几行代码就能支持种类繁多的屏幕分辨率呢今天就给大家介绍一种懒人必备的移动端定宽网页适配方法。测试设备三星真机三星虚拟机真机的适配比较简单，只需要设置即可。本文最初发布于我的个人博客：咀嚼之味如今移动设备的分辨率纷繁复杂。以前仅仅是安卓机拥有各种各样的适配问题，如今 iPhone 也拥有了三种主流的分辨率，而未来的 iPhone 7 可能又会玩出什么新花...

wenshi11019 2019-08-19 17:10 评论0 收藏0