美文网首页
适配pc端和移动端

适配pc端和移动端

作者: BigDipper | 来源:发表于2020-06-29 18:16 被阅读0次

👄 需求

在开发中,我们常常会遇到这样的需求:根据用户设备的不同,返回对应样式的页面。说白了,就是我在pc端看到的页面样式和布局,要跟移动端的不一样。

通常,我们使用自适应的前端框架(比如bootstrap),就可以达到这样的需求。这种方法不能说不行,但是(关键是这句😓),如果把pc端和移动端都写到一块儿,就会提高代码的复杂度,降低代码的灵活性。

这样的例子太多了,我曾经在做网站的时候,老板👨要求在pc端和移动端不光显示的样式、布局不同,连显示的内容模块都要不同。pc端显示甲模块、乙模块,移动端显示甲模块、丙模块,没过两天,需求又变了,pc端要显示甲模块、乙模块,还有丙模块,移动端去掉丙模块,添加丁模块。......太血腥了😱

所以,对自己好一点,如果条件允许,还是把pc端和移动端分开写为好。京东、淘宝......这些大网站也是这么干的。

💭 思路

如果我们写好了两套方案:pc端和移动端,那怎么部署呢?这是就需要nginx大显身手了。在nginx中,可以根据用户请求的user-agent来判断是返回pc端还是移动端。

💪 开干

nginx.conf文件中添加配置:

server {
        listen 8081;
        server_name 127.0.0.1;

        location / {
            root /home/py/myDevelop/testNginx/pc/;

            if ($http_user_agent ~* '(Android|webOS|iPhone|iPod|BlackBerry)') {
                root /home/py/myDevelop/testNginx/mobile/;
            }
            
            index  index.html index.htm;
        }

    }

说明:这里就是用了一个if语句,使用$http_user_agent全局变量来判断用户请求的user-agent,指向不同的root路径,返回对应站点。

这样就可以达到目的了。

---(完)---

相关文章

  • 移动端适配及pc端跳转代码

    移动端rem适配 pc端跳转

  • vue一套代码适应移动端,pc端

    一、 使用场景:有适配pc端改为适配pc端和移动端,使用2套css代码实现App.vue 注意:为2套css分别指...

  • 适配pc端和移动端

    ? 需求 在开发中,我们常常会遇到这样的需求:根据用户设备的不同,返回对应样式的页面。说白了,就是我在pc端看到的...

  • PC端与移动端适配方案

    最近有个将 PC 端项目迁移到移动端的需求。我就查了查 PC 端和移动端同时适配的方式。一共两种:通过 @medi...

  • 关于移动端和PC端适配

    博客两种办法:一种是响应式,另一种是自适应。前者对于复杂的页面和功能不好使,后者得多写一套页面

  • html5移动端开发响应式屏幕适配

    1、响应式设计不仅用在移动网站,在PC端也有不同屏幕的适配,而且移动端和PC端可以只使用一套代码,这就是全平台的响...

  • 如何用纯css 媒体查询media queries实现响应式汉堡

    PC端和手机移动端均适配,依据设备的宽度大小决定是否值下拉菜单样式 一、 head里添加meta移动端的样式 ☰ ...

  • vue移动端总结

    移动端适配 相对于PC端来说,移动端设备分辨率百花齐放,千奇百怪,对于每一个开发者来说,移动端适配是我们进行移动端...

  • 单项目里的多终端自适应

    背景 网站需要适配移动端,但是不能切换域名,只能在一个项目里适配,然后设计的移动端页面结构与PC端存在相当的差异,...

  • HTML移动端及PC端页面跳转判断

    网页通常需要适配PC端和移动端,适配可以通过响应式布局如bootstrap框架判断屏幕尺寸来展示不同的效果,还可以...

网友评论

      本文标题:适配pc端和移动端

      本文链接:https://www.haomeiwen.com/subject/gplafktx.html