移动端开发 及安装配置XAMPP

XAMPP，我的配置如下图，修改了端口号及项目存放目录。另外在F:\xmap\htdocs下有一个index.php文件，要删除，不然这个文件中的header('Location: '.$uri.'/dashboard/');会使我们输入的路径跳转到/dashboard。

 

再做了一次移动端的京东页面，手机打开的页面如下：

 

我们在开发移动设备的网站时，最常见的的一个动作就是把下面这个东西复制到我们的head标签中：

该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。也不允许用户缩放不同的网站有不同的要求，但让viewport的宽度等于设备的宽度。

device-width - 设备的宽度
initial-scale - 初始的缩放比例  
minimum-scale - 允许用户缩放到的最小比例   
maximum-scale - 允许用户缩放到的最大比例  
user-scalable - 用户是否可以手动缩放 

 还有一些辅助优化功能，常用的meta标签还有：禁止自动识别电话号码和邮箱、苹果手机中的将应用添加到手机主屏幕，会有一个icon可以直接进入等。

 

字体大小：em是根据其父元素的字体大小来设置，而rem是根据网页的根元素（html）来设置字体大小的。

如大部分浏览器html的默认显示font-size是16px，那么如果我们想给一个P标签设置12px的字体大小那么用rem来写就是：font-size: 0.75rem; //12÷16=0.75（rem） 

 

移动开发的优势：移动端开发的优势简单来说就是兼容性更好了，基本上只需要针对webkit内核的浏览器做兼容就好了，而且本身这类浏览器对html5、css3的兼容性就比较高。

移动开发的劣势：移动端目前设备类型特别多，移动端的适配比较难处理，移动端的事件也是一个难题，比如tap延迟，点击穿透等问题。

 

优化之移动端适配解决方案：

1. JS+rem-动态设置html的font-size 

• 利用css的media query来设置

@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
      html{font-size: 37.5px;}
}

• 利用javascript来动态设置

.con {
      width: px2rem(200px);
      height: px2rem(200px);
      background-color: red;
}

        

document.addEventListener('DOMContentLoaded', function(e) {
                document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px';
}, false);

 

1. 淘宝FLexible https://github.com/amfe/article/issues/17

 

移动端的像素：分为设备像素和CSS像素。一个CSS像素的大小是可变的。

 

设备像素比的计算公式：公式成立的大前提：（缩放比例为1）
设备像素比(DPR) = 设备像素个数 / 理想视口CSS像素个数(device-width)

750px的设备宽度的布局视口为357CSS像素：

为了适应所有的设备，我们应该用javascript代码动态生成meta标签，其中 window.devicePixelRatio 的值为设备像素比：

var scale = 1 / window.devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

http://hcysun.me/2015/10/19/一篇真正教会你开发移动端页面的文章-二/

 

创建响应式网格视图：首先确保所有的 HTML 元素都有 box-sizing 属性且设置为 border-box。 响应式网格视图通常是 12 列，宽度为100%，在浏览器窗口大小调整时会自动伸缩。