联系电话136 8812 4668(业务咨询) / 158 8206 4880(服务投诉)
赛门仕博官网

1

2018年08月23日

移动网站搭建方法

目前移动网站搭建方法有很多,很多开源建站程序都推出了自己建站程序的移动端搭建方案,也有独立的移动端网站建设方案,然而还有很多企业网站并没有搭建移动网站,移动端打开网站展示的还是pc端网站页面,接下来就来了解下移动端网站搭建的方法以及移动端网站的类型和一些一些技巧。

移动端网站大致分三种:自适应移动网站,百度转码后的移动网站,独立移动网站。app也算是移动端网站,但这里就不做说明了。

一,自适应移动网站

自适应移动网站就是让网页代码根据显示设备尺寸来调整显示样式,并且pc端与移动端能够通用一套网站模板与后台程序,这在建站成本和网站用户体验上有了极大的改善。但是自适应移动网站适用于采用最新技术的移动端浏览器进行展示,很多非智能手机并不能很好得显示,而且自适应移动网站受pc端网站布局设计限制比较大,完全是根据pc端页面布局和内容展示缩放扩展而来,灵活性不是很好。


自适应移动网站搭建方法如下:

1,在网站HTML头部模板添加viewport标签

在网站HTML文件的开头,增加viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度,且不进行初始缩放。代码如下:<meta name="viewport" content="width=device-width, initial-scale=1" />,这段代码支持Chrome、Firefox、IE9以上的浏览器,但不支持IE8以及低于IE8的浏览器。


2,在CSS文件尾部增加针对不同屏幕分辨率的规则

例如使用如下的代码,可以让移动端屏幕宽度低于480像素的设备(如iPhone等),网页侧栏隐藏中部内容栏宽度自动调节,以下代码针对Z-Blog,WordPress相关标签名称只需修改一下即可。

@media screen and (max-device-width: 480px) {

#divMain{

float: none;

width:auto;

}

#divSidebar {

display:none;

}

}

3,布局宽度使用相对宽度

网页总体框架可以使用绝对宽度,但往下的内容框架、侧栏等最好使用相对宽度,这样针对不同分辨率进行修改就方便。当然也可以不用相对宽度,那就需要在 @media screen and (max-device-width: 480px) 里面增加各个div的针对小屏幕的宽度。


4,页面使用相对字体

在HTML页面上不要使用绝对字体(px),而要使用相对字体(em),对于大多数移动端浏览器来说,通常用em = px/16 换算,例如16px就等于1em。


5,图片自适应

img标签的话,只需要设置 max-width: 100%;或width:100%; 语句为:img { max-width: 98%; },css加载的background-image如何自适应大小呢,其实CSS3中是可以实现的,添加如下语句:background-size:100% 100%; 总之,根据上面步骤进行修改的话,可以很简单地将一个网站修改为适合多种设备浏览的页面。


二,百度转码后的移动网站

很多企业网站没有搭建移动端网站,而百度为了搜索引擎优化的浏览体验,制作了pc网站页面在移动端展示的转码功能,这个功能虽然解决了不少网站的移动端浏览问题,但体验却不是很好。首先百度会检索判断网站是否是自适应网站或者独立移动端网站,如果发现是pc端页面,就会自动对页面进行转码,转码后的移动端网站样式很难看,仅展示了内容文字,很多页面样式并没有很好得展示。也可以添加转码代码,在head添加以下代码并且使用<picture>元素处理自适应图片:<meta name="viewport" content="width=device-width, initial-scale=1.0">


三,独立移动网站

独立移动端网站指独立开发的移动端网站,与pc端网站完全分开的,有些独立移动端网站与pc端网站是使用的统一的网站后台,有些并没有。独立移动端网站相比自适应移动端网站用户体验更加好,不受pc端内容排版布局样式限制,一般比较复杂的或者追求个性特色的移动端网站会采用独立开发移动网站。很多开源程序都有了自己的移动端网站模板,可以直接套用搭建移动端网站,原理跟pc端模板网站搭建一样。还有一些类似于saas建站平台可以搭建移动端网站,不过网站整体质量与体验并不好,并且不太灵活,功能限制比较大。如果是追求高端手机网站最好选择专业的成都网站建设公司进行定制开发移动手机网站。


四,移动端网站转码问题处理

在搭建移动端网站时不管是自适应移动手机网站还是独立的移动网站,百度经常会把网页进行转码展示,为了避免这个问题,在搭建手机端网站时需要通过协议禁止百度自动进行页面转码。

申明代码:<meta http-equiv=”Cache-Control” content=”no-transform” />

有两种添加方式:

1)在HTTP Response中添加声明:Cache-control为no-transform。

2)meta标签中添加声明:Cache-control为no-tranform

格式如下:

<head>

<meta http-equiv=”Cache-Control” content=”no-transform ” />

</head>

最新方法:

<head>

<meta http-equiv="Cache-Control" content="no-transform" />

<meta http-equiv="Cache-Control" content="no-siteapp" />

</head>

这段代码表明网站页面不希望被转码,直接将代码添加到网站头部模板即可(独立移动端网站是添加到移动端头部模板)。添加此协议申明,当用户通过百度移动搜索进入该网站时会进入原网页浏览。

以上便是移动端网站搭建的几种类型和大致的搭建方法以及注意事项,手机网站和微信端网站是未来的发展趋势,实现pc端、移动端以及微信端三端网站统一管理和维护是网站开发的目标。