pc端与移动端适配 解决方案 (pc端与移动端)

本文目录导航：

• pc端与移动端适配 解决方案
• 为什么网页在电脑能打开但在手机上不能打开？
• 利用axure进行响应式自适应网站的设计

pc端与移动端适配 解决方案

一般网站在实现pc端与移动端适配的需求时，主要采用两种方案：1、响应式方案：设计一个页面，通过媒体查询自动调整样式，以适应不同设备尺寸。

这种方案使用一套代码实现pc端和移动端的适配。

例如，可以设置宽度的比率而非具体的数字，以确保在不同分辨率下网页内部空间的比例保持最佳状态。

我的博客采用的就是响应式方案。

2、两套页面方案：开发针对pc端和移动端的两个页面，根据设备尺寸加载相应的资源。

尽管这种方案不常见，但在特定情况下仍然适用。

响应式方案的案例包括：1、个人博客用户端：在移动端上，只保留核心功能，如文章列表，并隐藏其他辅助功能，如热门文章排序、文章分类等。

2、管理后台：调整菜单布局，例如将侧边导航栏转换为折叠式菜单，以适应移动设备屏幕大小。

在开发过程中，需要注意以下几点：1、使用浏览器的F12功能，配合调整浏览器大小，来测试页面在不同宽度下的展示效果。

2、利用各大浏览器的移动端模拟器进行开发，但需注意模拟器偶尔会出现定位问题，如fixed定位失效，这通常是模拟器本身的bug。

3、在获取浏览器分辨率时，要区分实际分辨率与用户在浏览器中设置的缩放比例。

js获取的分辨率是用户缩放后的，因此可能与实际分辨率不同。

4、动态计算元素高度时，应使用浏览器的可视窗口尺寸，例如，以确定实际的页面展示区域。

为什么网页在电脑能打开但在手机上不能打开？

有些网站手机能打开电脑却打不开，主要是因为网站可能采用了响应式设计，对移动设备进行了优化，而没有对桌面设备进行同等的适配，或者是网站服务器、网络设置、浏览器兼容性等问题导致的。

首先，我们来探讨响应式设计的影响。

响应式设计是一种使网站能够根据不同设备的屏幕尺寸和分辨率自动调整布局的设计方法。

很多现代网站都采用了这种设计，以确保在移动设备如智能手机或平板电脑上提供最佳的用户体验。

如果网站主要面向移动用户，并重点优化了移动端的显示，那么在电脑上打开时可能会遇到布局错乱、元素重叠或者功能失效等问题，尤其是在浏览器窗口尺寸与移动设备屏幕差异较大的情况下。

其次，服务器和网络设置也可能是造成这种情况的原因。

某些网站可能设置了基于用户设备类型的访问限制，例如，只允许移动设备访问，或者对桌面设备的访问请求进行了限制。

此外，网络防火墙或安全策略也可能阻止特定类型的设备访问网站。

最后，浏览器兼容性也是一个不可忽视的因素。

不同的浏览器对网页标准的支持程度各不相同，尤其是在处理CSS、JavaScript等前端技术时。

如果网站开发者在编写代码时没有充分考虑到这一点，就可能导致在某些浏览器上无法正常显示或运行。

例如，一个网站可能在移动端的Chrome浏览器上表现良好，但在电脑端的Internet Explorer或Edge浏览器上却出现问题。

综上所述，网站在手机能正常打开而在电脑上打不开，可能是由于响应式设计的不完全适配、服务器和网络设置的限制，以及浏览器兼容性问题等多种因素共同作用的结果。

为了解决这类问题，网站开发者需要综合考虑各种设备和浏览器的差异，确保网站在各种环境下都能提供一致且良好的用户体验。

利用axure进行响应式自适应网站的设计

在axure 8发布以后，可以利用几项技术（axure自动生成自适应html、前后端分离、响应式网站设计、restful接口、json或xml等）进一步简化网站的开发，该设计模式的主要流程如下： 1. 产品经理利用axure设计原型。

2. 原型讨论定型后由UI人员设计图标，更新到axure原型中。

3. 由axure生成自适应的响应式网站设计的html文件。

参考：注意：axure发布项目生成html时，在左侧的“ 移动设备 ”这个设置页，需要 勾选“包含视口标签”，不勾选“禁止页面垂直滚动”，宽度设置为“device-width”， 高度留空不设置，初始缩放倍数绝对不能设置 ，最小缩放倍数设置为“0.1”，最大缩放倍数设置为10，允许用户缩放留空不设置 ，ios部分可以不理默认即可。

另外需要 axure 8以上版本才能普遍适配手机 屏幕。

4a. 前端开发人员全盘使用上面生成的html文件、资源文件、axure的js文件，在各个页面上以前后端分离方式添加业务逻辑的实现（比如在html中加入jquery的ajax，和后端交互数据）。

4b. 后端开发人员设计和实现业务逻辑和前后端接口（4b可以和3、4a步骤同步进行），比如前后端使用restful的json封装作为前后端接口的数据交互。

5. 单元测试、集成测试、灰度测试，bug修复，发布上线。

该模式问题 ： 一旦axure原型有修改，前端怎么能更快适配该修改（现在是文件比较方式，类似git的merge）。