当前位置:主页 > SEO优化 >

【seo免费培训】手机网站是怎么建设?

作者: 奕星SEO 分类: SEO优化 发布时间: 2019-11-10 15:44 内容来源:网络整理阅读量:

移动端网站作为移动互联网最主要的入口,能随时展现自身、与目标用户便捷沟通,同时方便手机用户随时随地查询和浏览,有效占领客户“空闲时间”。移动端网站确实是最便捷的宣传册,无论何时何地,遇见何人,你只要打开手机即可以让对方浏览到产品和服务信息,不会错过任何一次宣传和推销。

  

  建立一个适合移动端浏览的网站有很多种方法,主流的方法有自适应网页设计、移动网站和移动APP应用三类,通过这些方法,可以在短时间内将一个已有的桌面网站转换为适合移动设备访问的网站。

【seo免费培训】手机网站是怎么建设?

 

 

  一、自适应设计网站

 

   自适应网页设计,就是让同一个网页代码,能够在不同设备上(从桌面电脑显示器到智能手机或其他移动产品设备)都能有更好的浏览体验,因此,站长在建站前,就要考虑好页面布局如何能适应多屏幕浏览,这样移动设备可以通过原网址来浏览桌面站点,看到的是自动适应屏幕大小后的网站。

  

  尽管这种方式使得域名统一了,但如果对于结构复杂、页面反复的网站来说,代码设计具有相当高的难度。

 

   因此,通常自适应网页设计比较适合单栏或双栏等简单版面网站,对于复杂版面较难设计(具体可查看小编博客《如何利用“自适应网页设计”实现不同的设备上呈现同样的网页》的相关介绍)。

 

   由于自适应设计的内容使用同一个网址,不会出现重定向,因此对于访问用户来说,不必花时间记忆另外网址,对于网站开发者来说,改造单栏或双栏网站为自适应网站的开发较为简单,只需对CSS进行不大的修改即可。

 

   自适应网页需要手机浏览器支持css3,例如目前的iPhone和Android内置浏览器都支持css3,但诺基亚手机内置浏览器就不支持css3,考虑到老式的手机已经逐步淘汰,这部分用户也可以考虑忽略不计。

 

   同时,自适应网页需要展示更多的图片,较耗费流量,因此也不太适合2G网络用户访问。

  

  对于网站的修改来说,只要在HTML头部增加viewport标签(控制显示尺寸、是否允许缩放、初始比例、上下限等)、MobileOptimized标签(微软为IE Mobile版设置的定义宽度标记)和HandheldFriendly标签(是否对手持设备友好,只有true或者false),在CSS文件尾部增加针对不同屏幕分辨率的规则,布局宽度使用相对宽度,隐藏侧栏,半小时的开发量就可以提升网站的手机移动浏览体验。

  

  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%;

 


本文链接地址:http://www.seohuizhou.com/seoyouhua/18622.html
上一篇:<<【SEO学习教程】搜索关键词优化方法:3大方法要掌握
下一篇:【合肥seo优化公司】关键注意这几点做好网站优化>>