手机网站和电脑网站设计是需注意的区别

手机和电脑不管是在分辨率还是操作系统方面的差异很大,这也是决定了手机网站和电脑网站的区别。那到底手机网站和电脑网站有哪些区别?

一、浏览内容
1、电脑网站的分辨率是1024*768,而智能手机的分辨率仅有320*480。
2、电脑网站内容信息度广,降低用户视觉疲劳,而手机网站浏览内容不方便,大大增加视觉疲劳

二、垂直浏览取代水平浏览
电脑网站在呈现数据内容时,以水平导航方式。用户可以左右移动点击链接浏览信息。而手机网站在呈现数据内容时,以垂直导航方式。

三. 导航条,标签和超文本
在电脑网站中,我们可以看到超链接的,而在手机网站中,我们却很少看到超链接。并不是手机网站中没有超链接,而是被一些按钮,标签等替代了
用户使用手指来操作移动设备是产生垂直导航方式的原因之一。在电脑上,移动鼠标,点击超链接是很理想的查看信息的方式,但是在移动设备中,通过手指触摸屏幕来打开超链接就不那么容易了。用户可以很容易激活一个链接,进入一个新页面,但,这并不是用户期望的页面,如果这样的话,会产生非常差的体验效果。

四、图片
在网页中,我们经常能看到企业网站的logo,产品信息、导航的图形信息等等。设计者经常需要设计网站促销产品图形,公司logo等。而在手机网站设计中,尽量减少图片,原因很简单:手机屏幕小,显示内容有限,占用内存大,浪费大量的移动流量。

五、全局导航与情境导航
在电脑网站中,可以使用各种各样的导航方式,而手机网站采用全局导航的,情景导航极少。在手机网站中,手机屏幕大小决定使用导航方式。

六、滚动条
手机浏览器浏览信息,是没有快捷滚动条。而在计算机浏览器浏览信息,是有快捷滚动条。比如一个图中有下拉列表输入域在台式机上能够正常显示
而在手机上只能显示几个选项,必须要用滚动条才可以看到的。

七、手机浏览器对某些css属性不支持
例如:position:fixed
如果需要在手机屏幕显示top bar、bottom bar,则比较麻烦,需要通过css+javascript来实现。

以上就是手机网站与电脑网站的主要区别,正因为这些问题的存在,在设计手机网站模板时,需要考虑如何设计使更符合不同终端用户的使用习惯。
时间: 2024-11-14 21:42:03

手机网站和电脑网站设计是需注意的区别的相关文章

根据浏览器跳转到手机网站还是电脑网站

<script type="text/javascript"> var browser = { versions: function() { var u = navigator.userAgent, app = navigator.appVersion; return { //移动终端浏览器版本信息 mobile: (!!u.match(/AppleWebKit.*Mobile/) || !!u.match(/Windows Phone/) || !!u.match(/An

真实手机访问本地电脑网站失败的原因

最近做了一个网站,想用真实手机访问进行调试,但是访问时却提示无法连接,不能打开网站,这是什么原因,百思不得其解,因为手机是可以通过WiFi上网的,电脑虽然是通过网线上网,但都使用同一个路由器,而权限方面并没有做任何限制.之后通过几步检测,终于找到了原因,并解决了问题. 1.测试局域网能否连通 检测的第一步是测试局域网能否连通.这里需要另一台局域网电脑来测试,测试的方法是在电脑里ping一下本机IP. 网络连通性测试 能ping通就表示网络是连通的. 2.检测局域网能否访问共享 测试访问共享的方法

支付宝支付之扫码支付(电脑网站支付)、H5支付(手机网站支付)相关业务流程分析总结

前言 在上一篇文章<微信支付之扫码支付.公众号支付.H5支付.小程序支付相关业务流程分析总结>中,分析和总结了微信支付相关支付类型的业务流程,这里作为与微信支付平起平坐不相伯仲的支付宝支付,当然也是每个公司少不了的第三方支付接入选择. 因此,本篇文章主要分析和总结支付宝支付中的扫码支付.H5支付相关业务流程. 概述 1. 电脑网站支付 电脑网站支付,也称扫码支付,是专门针对电脑而开发的一种支付方式,既在网页展示一个动态生成的支付二维码,用户通过手机支付宝扫码以后可实现支付功能的一种支付方式.

友点企业网站管理系统集电脑网站、手机网站、微信三站合一

友点企业网站管理系统集电脑网站.手机网站.微信三站合一,只要录入一次数据,三站数据自动同步,降低人力维护工作量:只要一个虚拟主机,有效节约空间投资.系统采用PHP进行开发,它具有操作简单.功能强大.稳定性好.易扩展.安全性强.后期维护方便等特点,可以帮您迅速.轻松地构建起一个强大专业的企业网站.系统支持多语言.自定义模型.SEO优化.静态页生成.评论留言.订购.会员.广告.招聘.统计.自助表单等常见企业网站基本功能.运行环境:PHP5.2 + MYSQL5.0以上 + Zend Optimize

手机网站与普通网站的不同

手机网站与普通网站有很多不同的地方,所以在编写手机网站时,有很多问题需要注意,需要多测试. 1. 内容优先 手机分辨率比电脑的分辨率小很多,所以在手机版网页上只显示最主要的内容.下图所示是携程网的首页和手机版的首页. 2. 垂直浏览取代水平浏览 如上图所示,普通站点的网页中,导航条都是横向的,而在手机版网页中,导航条(功能标签)都是纵向的. 3. 导航条,标签和超文本 在手机上,用户主要通过手指触摸屏幕来进行操作.为方便用户操作,网页上应尽量不使用超链接,而更多地使用导航条,标签和按钮. 4.

一个优秀的网站首页是如何设计的?

网站首页是用户进入你网站看到的第一面,如果这第一面给用户的印象不好,不够吸引,那样会让用户没有了继续浏览的欲望.一个不够吸引人的网站首页,就算你网站推广做的再好,IP量再高,但是往往就是因为网站首页设计的不够好.不够精致.不够吸引,从而导致了网站转化率不高.网站首页的设计不但在网站建设过程中很重要,在网站优化中也起到了关键作用.那么一个优质的网站首页该怎么样设计呢?一个震撼的网站首页用什么设计呢? 网站首页无论是放在网站设计,还是网站建设和网站优化中都是首要针对的步骤.不管是企业网站.个人网站,

支付宝支付之电脑网站支付与SpringMvc整合

支付宝开放平台下载alipay-java-sdk https://open.alipay.com 目前官方没有提供maven,下载sdk后,可以用maven命令安装到本地仓库,执行如下命令 mvn install:install-file -DgroupId=com.alipay -DartifactId=alipay-sdk-java -Dversion=xxx -Dpackaging=jar -Dfile=D:\alipay-sdk-javaxxx.jar 项目增加maven配置 <depe

大型网站技术架构——网站架构的伸缩性设计

首先,所谓网站的伸缩性,指不需要改变网站的软硬件设计,仅仅通过改变部署的服务器数量就可以扩大或者缩小网站的服务处理能力.在整个互联网行业的发展渐进演化中,最重要的技术就是服务器集群,通过不断地向集群中添加服务器来增强整个集群的处理能力. 一.网站架构的伸缩性设计 1.1 不同功能进行物理分离实现伸缩 (1)纵向分离:将业务处理流程上得不同部分分离部署,实现系统的伸缩性: (2)横向分离:将不同的业务模块分离部署,实现系统的伸缩性: 1.2 单一功通过集群规模实现伸缩 使用服务器集群,即将相同服务

网站统计功能的设计与实现

关键字:网站统计 设计 实现 作者:方倍工作室原文: http://www.cnblogs.com/txw1958/p/website-statistic-analysis.html 本文简要介绍网站统计功能的设计与实现. 本文分为以下五个部分: 埋点设计与实现 页面引入 数据接收 数据入库 统计分析 一.埋点设计与实现 在JavaScript中,包含了很多对象,可以用于获取用户的数据.比如Document对象用于分析每个载入浏览器的 HTML 文档,可以获得当前文档的域名.URL.及当前文档的