PHP语言手机端PC端自适应与响应式开发技术

时间：2023-05-31 02:15:01 | 来源：网站运营

时间：2023-05-31 02:15:01 来源：网站运营

PHP语言手机端PC端自适应与响应式开发技术：一、PHP如何判断手机端与PC端

开发公司网站的时候，需要判断客户是手机端还是电脑pc端，对于不同的设备给予不同的页面访问。以下方法可以判断是电脑端还是手机端，该方法返回为字符串"1"时为手机端，返回为"0"时为电脑端。^[1]



function isMobile() { // 如果有HTTP_X_WAP_PROFILE则一定是移动设备 if (isset ($_SERVER['HTTP_X_WAP_PROFILE'])) { return "1"; } // 如果via信息含有wap则一定是移动设备 if (isset ($_SERVER['HTTP_VIA'])) { // 找不到为flase,否则为true return stristr($_SERVER['HTTP_VIA'], "wap") ? "1" : "0"; } // 脑残法，判断手机发送的客户端标志,兼容性有待提高 if (isset ($_SERVER['HTTP_USER_AGENT'])) { $clientkeywords = array ('nokia', 'sony', 'ericsson', 'mot', 'samsung', 'htc', 'sgh', 'lg', 'sharp', 'sie-', 'philips', 'panasonic', 'alcatel', 'lenovo', 'iphone', 'ipod', 'blackberry', 'meizu', 'android', 'netfront', 'symbian', 'ucweb', 'windowsce', 'palm', 'operamini', 'operamobi', 'openwave', 'nexusone', 'cldc', 'midp', 'wap', 'mobile' ); // 从HTTP_USER_AGENT中查找手机浏览器的关键字 if (preg_match("/(" . implode('|', $clientkeywords) . ")/i", strtolower($_SERVER['HTTP_USER_AGENT']))) { return "1"; } } // 协议法，因为有可能不准确，放到最后判断 if (isset ($_SERVER['HTTP_ACCEPT'])) { // 如果只支持wml并且不支持html那一定是移动设备 // 如果支持wml和html但是wml在html之前则是移动设备 if ((strpos($_SERVER['HTTP_ACCEPT'], 'vnd.wap.wml') !== false) && (strpos($_SERVER['HTTP_ACCEPT'], 'text/html') === false || (strpos($_SERVER['HTTP_ACCEPT'], 'vnd.wap.wml') < strpos($_SERVER['HTTP_ACCEPT'], 'text/html')))) { return "1"; } } return "0"; }



二、自适应的概念基于PHP技术的多客户端自适应网站的设计与实现

十几年前，著名的外国Ethan Marcotte教授提出了自己对网页方面的一个论点就是“自适应网页设计”（Responsive Web Design）这个专有名词，可以在设计网页的时候让网页在设备显示的时候，自动识别屏幕的宽度、而且做出调整相应网页的设计。 他本人做出了一个非常有意思实验，就是把几张主人公的头像都进而制作设计成网页中，当这些头像图片并排在一行时，说明屏幕的宽度大于1300像素。当这些头像图片分成两行时，说明屏幕的宽度在600像素到1300像素之间。当导航栏有些偏移到网页的顶部时，说明屏幕宽度在400像素到600像素之间。当这些头像图片分成三行，说明屏幕的宽度在400像素以下。

2.1自适应的发展方向与应用

现在为什么需要自适应网页设计？
因为“科技时代已经来临，一步一步的向前发展，不断的有各种各样的新型设备（手机/平板电脑/手环）、平台和浏览器都需要各种网站的网页能够兼容显示。自适应网页设计决定了一种必然的设计趋势，在现如今年所有的网站都将采用自适应网页设计。
那么是谁在使用自适应网页设计呢？其实不管是用在演示、还是流行设计和页面美化中。而今大量的网站已经采用了自适应网页设计。何时需要采用自适应网页设计？当你需要考虑以下事情时：在时间上，金钱上，不同浏览器的支持，性能，内容的呈现，网站等等去跟移动应用相对比时，自然而然就需要采用自适应网页的设计。

现在的互联网已经发展到了移动网络5G的时代，我们接触互联网的方式已经开始呈现出多元化方向发展，屏幕大小的展示有很大的不确定因素，假设现在的个人和企业等方面的网站要求每个显示屏幕都去制作设计一个网站，很明显就会会加大设计和管理网站的成本，同时还会涉及到未来的运营方面的不便和耗费大量的人力财力的成本来支撑其运营。
自适应网站的设计的出现使的设计师在设计一个网站的时候，可以方便快捷的市网页适应不同的终端系统，应用到不同的网络载体上去，它具有非常好的的便捷性，同时也有利于减少企业设计开发网站的成本等。

老式的网站是固定的死网页的宽度或者高度，在不同的客户端所展现的页面效果都是一样的。所谓自适应网站设计是指在网页前端展示的内容是活的，即笔记本电脑、台式电脑、移动设备等不同的设备所看到的内容是不一样的，有了这种技术，网页就可以适应任何终端，在任何终端都能展示出最好的效果。
对目前的自适应网页设计的发展趋势来讲，无论是放在市场的角度，还是建设网站的角度，自适应网页将会取代传统建设网站的地位。互联网日新月异，随着更多的互联网技术的诞生，会有更强大的技术出现。

2.2自适应与响应式区别

响应式布局的网页可放在不同适配分辨率下的呈现，这一概念在2010年5月由Ethan Marcotte提出的，简单来说就是建立一个网页，通过CSSMedia Queries，Content－Based Breakpoint（基于内容的断点）等技术来改变网页的大小以适应不同分辨率的屏幕。

自适应布局依据不同适配分辨率而选择不同的页面，为不同类别的设备建立不同的网页，检测到设备分辨率大小后调用相应的网页。

目前AWD网页主要针对以下几种分辨率（320，480，760，960，1200，1600）。制作和设计网站的时候，我们需要根据需求来判断什么样的网站适合使用自适应布局（固定断点），什么样的网站适合响应式布局（流体网格）。响应式布局在任何情况下都比自适应布局好一些，但在某些情况下自适应布局更切合实际。

自适应网页设计的优势就是适合固定断点的网站。在网页的实施上面代价成本更低，测试也比较容易。
自适应布局可以让设计更加容易操作控制，因为它只需要考虑几种状态就行了。
自适应本身是去解决怎样才能在不同大小的移动设备或者其他设备上表现出相同的网页，宽度一般在600像素以下和在1000像素以上的时候，前者说明是手机小屏幕后者则是pc端。相同的内容，在大小不一的屏幕上，都表现出理想满意的效果，不是一件易事。

总结：
响应式网页设计是一种能使网页能够在不同窗口大小或不同屏幕大小的设备上都良好展示的网页设计技术。
自适应网页设计是一种后端检测技术，它可根据用户代理选择布局和大小合适的页面。
自适应设计会根据屏幕尺寸和分辨率，为不同设备提供不同版本的网站（网页）。

2.3PHP与H5
PHP以服务端开发为主，H5是前端开发。服务端主要与服务器（CPU、内存、磁盘、网络）和数据库打交道，性能是重点。服务端一般不直接与用户打交道，而是与更接近用户的应用及前端交换数据。前端主要与人打交道，重点是开发出用户体验良好的应用和网站。
H5不只是HTML、CSS，而是以JS为主的前端和Web App开发最新技术的统称。^[2]
H5，是HTML5 的简称。 它实现的功能与Flash 类似（用于实现动画和各种酷炫的人机交互界面等），但是比Flash 具有更强的兼容性，可扩展性，稳定性以及安全性，因为该技术是HTML 的延展。HTML5并不是一项技术，而是一个标准。
H5虽是一个网页的形式，但主要是靠微信扫码、公众号、微信群和朋友圈等渠道传播，H5与微信的捆绑十分紧密。

参考

1. ^php判断是否为移动手机端 https://www.php.cn/php-ask-478885.html
2. ^基于PHP技术的多客户端自适应网站的设计与实现 https://www.cnfg.cc/article/201711/1381-1.html