我要招人

去企业版

首页 > 试题广场 >

用户从手机的浏览器访问www.baidu.com，看到的可能

[问答题]

用户从手机的浏览器访问www.baidu.com，看到的可能跟桌面PC电脑，是不太一样的网页效果，会更适合移动设备使用。请简要分析一下，实现这种网页区分显示的原因及技术原理。

推荐

牛客384808号

手机的网速问题、屏幕大小、内存、CPU等。通过不同设备的特征，实现不同的网页展现或输出效果。根据useragent、屏幕大小信息、IP、网速、css media Query等原理，实现前端或后端的特征识别和行为改变。

编辑于 2014-12-05 10:28:55 回复(1)

切水果的女孩

这种网页设计叫做响应式WEB设计，这样设计的原因是为了根据客户端不同的屏幕尺寸来智能显示最适合的用户体验界面，也叫作流式设计、自适应布局都能等。

技术原理：

1. 媒体查询[@media screen and (max-width:960px)]/使我们根据设备的各种功能特性来设定相应的样式。媒体查询可以检测的特性有视口高度（height）、视口宽度（width）、device-width、device-height（设备屏幕的高度和宽度）、orientation（检查设备是处于横向还是纵向）、aspect-ratio：基于视口宽度和高度比、device-aspect-ratio基于渲染平面宽度和高度比、color各种颜色位数、color-index设备颜色索引表中的颜色数等等。

2. HTML5与CSS3.

发表于 2015-08-11 10:47:58 回复(1)

撒哈拉小狐狸

网页有脚本会自动判断来访者的IP地址和端口，一般手机访问的话会是特别的端口比如80。还有手机访问网络会发射信号说访问的是移动端，这时服务器会将移动端的界面发送到手机里。大体就是这个原理了，也就是每次访问，服务器都会知道来访者是手机还是电脑。

发表于 2014-12-10 11:15:34 回复(0)

妞-放肆

css3响应式布局或者单独分别制作pc端和移动端页面，css3响应式布局是用@media screen and (max-width:100px;){...}类似这样的写法达到不同设备不同效果的效果。

发表于 2014-12-02 17:54:57 回复(0)

Azz

www.baidu.com解析的域名时首先调到www.a.shifen.com, 百度可能在这个服务器上会分析访问浏览器的user-agent来分析来自桌面设备还是一地哦那个设备, 以此来确定要提供的网页.

发表于 2014-12-28 22:39:26 回复(0)

dayday_up

原因：不同设备的屏幕大小、内存、CPU都可能不同，为了给不同的终端使用者提供良好的用户体验，需要根据终端设备的特性提供相应的页面效果。

原理：

1. 可以使用响应式布局，页面内容根据设备屏幕大小自适应

2.可以通过识别useragent终端相关信息，后端动态返回与终端匹配的页面

发表于 2018-08-07 10:31:20 回复(0)

马赛de回旋

根据不同的终端设备匹配对应的网页

发表于 2017-04-19 15:33:18 回复(0)

TeresaLiuLuLu

服务器会根据浏览器端的user-agent，以此来判断是PC端，还是移动端，以返回不同的内容

发表于 2017-03-06 15:15:00 回复(0)

小kk0606

之所以有这种区别，是因为PC端的页面不怎么适用于移动端的显示，而且PC端的流量速度更是比移动端的流量大很多，所以同样的资源在移动端加载要比在PC端消耗更多的时间和流量，造成更长的等待时间，此外屏幕的显示也会给用户带来困难，这就决定了移动端无法和PC端共用一套实现机制。

可以使用媒体查询的方式针对各种屏幕的大小设置不同的断点，然后依据这些断点来进行不同的样式编写实现移动端的用户良好界面。

发表于 2016-09-05 10:43:41 回复(0)

mzvast

根据navigator.里面浏览器的相关信息判别是否移动设备访问，从而返回不同的页面

发表于 2016-09-04 14:10:29 回复(0)

ruru

原因：小屏幕和大屏幕的显示效果是不同的，如果使小屏幕和大屏幕的显示效果一样，那么必然会有一个屏幕无法得到比较好的用户体验。所以要针对不同的屏幕大小渲染不同的页面。

实现这种方案的技术当然是"响应式布局"，依靠CSS3提供的媒体查询功能，JS脚步来实现。

发表于 2015-08-03 12:00:05 回复(0)

盆盆0406

可以根据屏幕的宽度和分辨率

@media srceen and (-webkit-min-device-pixel-ratio)

发表于 2015-04-01 17:06:00 回复(0)

P.S.

原因：不同设备之间的屏幕大小、内存、cpu等的不同

原理：根据不同设备的特征，比如useragent、屏幕大小信息等，实现网页不同的展现方式

发表于 2015-03-27 11:40:28 回复(0)

Leooonard

手机屏幕的px与css中写的px并不完全一致. 因为手机屏幕尺寸关系, 手机浏览器会对页面大小进行优化. 其方法就是改变屏幕分辨率算法, 比如将4个像素点算成1个像素点, 以此降低手机屏幕分辨率, 得到更好的显示效果. 如iphone, 其屏幕分辨率其实为320PX(此px对应css中的px). 而在head中设置viewport即是告诉手机浏览器, 该如何显示网页. 一般设置为viewport="device".

发表于 2015-03-27 01:16:58 回复(0)