移动端开发及安装配置XAMPP

￡神魔★判官ぃ 2022-04-23 08:58 281阅读 0赞

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70 1][]

**我们在开发移动设备的网站时，最常见的的一个动作就是把下面这个东西复制到我们的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;
    }
    <div class="con">
            
    </div>
    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][https_github.com_amfe_article_issues_17]

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

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

750px的设备宽度的布局视口为357CSS像素：<meta name="viewport" content="width=device-width,initial-scale=0.5,maximum-scale=0.5,user-scalable=no" />

**为了适应所有的设备**，我们应该用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');

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70 2][]

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70]: /images/20220322/afafe50c59bd4929a26ecd5977aea121.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70 1]: /images/20220322/371e9805acf641c48161afa131ec35a6.png
[https_github.com_amfe_article_issues_17]: https://github.com/amfe/article/issues/17
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70 2]: /images/20220322/dcce974276824ba6ac144dc9c4d44d9e.png
[http_hcysun.me_2015_10_19_-]: http://hcysun.me/2015/10/19/%E4%B8%80%E7%AF%87%E7%9C%9F%E6%AD%A3%E6%95%99%E4%BC%9A%E4%BD%A0%E5%BC%80%E5%8F%91%E7%A7%BB%E5%8A%A8%E7%AB%AF%E9%A1%B5%E9%9D%A2%E7%9A%84%E6%96%87%E7%AB%A0-%E4%BA%8C/