手机网站与普通网站的区别

news/2024/5/20 10:36:34/文章来源:https://blog.csdn.net/weixin_30897233/article/details/97465228

手机网站与普通网站有很多不同的地方,所以在编写手机网站时,有很多问题需要注意,需要多测试。

1. 内容优先

手机分辨率比电脑的分辨率小很多,所以在手机版网页上只显示最主要的内容。下图所示是携程网的首页和手机版的首页。

2. 垂直浏览取代水平浏览

如上图所示,普通站点的网页中,导航条都是横向的,而在手机版网页中,导航条(功能标签)都是纵向的。

3. 导航条,标签和超文本

在手机上,用户主要通过手指触摸屏幕来进行操作。为方便用户操作,网页上应尽量不使用超链接,而更多地使用导航条,标签和按钮。

4. 图片

在移动站点设计中,应该减少图片的使用,原因有二:其一,一些移动设备并不支持和传统网页站点一样显示方式;其二,移动屏幕较小,显示内容有限,除此之外,过多的显示内容会降低移动设计的运行速度。

5. 全局导航与情境导航

在桌面站点中,可以使用各种各样的导航方式,如全局导航和情境导航。移动站点采用全局导航,情境导航极少。

在移动站点中,移动设备有限的屏幕决定了应该减少全局导航和情境导航。然而,缺少全局导航和情境导航则会让用户迷失,为此,在构建移动内容时,应该尽量减少层级关系,这样,用户无需挖得太深就可以找到自己所需的信息,作为设计师,应该让用户在迷失之前找到自己的信息。

6. 滚动条

手机浏览器没有滚动条,所以在计算机浏览器中出现滚动条的地方在手机浏览器上不一定能够按照预想的那样来显示,下图中的下拉列表输入域在台式机上能够正常显示,但在手机上只能显示前几个选项,需要滚动才能看到的项根本显示不出来。

7. 手机浏览器对某些css属性不支持

例如:position:fixed

如果需要在手机屏幕显示top bar、bottom bar,则比较麻烦,需要通过css+javascript来实现。

转载于:https://www.cnblogs.com/gohappy/archive/2012/12/07/2807100.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_767014.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

大型网站架构演变和知识体系

(摘自http://www.blogjava.net/BlueDavy/archive/2008/09/03/226749.html) 大型网站架构演变和知识体系 之前也有一些介绍大型网站架构演变的文章,例如LiveJournal的、ebay的,都是非常值得参考的,不过感觉他们讲的更多的是每次演变的结果&…

HTTPS 方式访问网站

开发网页的时候,往往需要观察HTTP通信。 我使用的工具主要有两个,在Firefox中是Firebug,在IE中是Fiddler。但是,一直听别人说,付费软件HttpWatch是这方面最好的工具。 前几天,HttpWatch的官方网志刊登了一篇…

win7-VS2010-IIS网站的发布问题

前提:IIS配置已经完成   问题描述:我们在机房实验里,大家的都可以访问同学A发布的IIS网站,但是,A却不能访问我们每个人的网站,而我们也不能互相访问(除了A)。 问题解决&#xff1a…

大型网站--前端性能优化和规范

大型网站--前端性能优化和规范 Web性能涉及的范围太广,但一般web开发者在程序上线以后很多都曾遇到过性能的问题。普遍表现为页面速度开始急剧变慢,正常访问时间变的很长,或则干脆给你抛出异常错误页面。这里会涉及到很多可能发生的情况&…

网页设计-第四天-个人(个性)网站设计

个性网站设计 head 60px (50~70)banner 550px(500~600)色彩可以比企业站随意、鲜活,不用遵循3,6,9的原则footer 50px 小于head logo 可以设计的个性化一点,使用多边形,类似QQ登录时,多边形背景 使用钢笔…

网站易用性

1. 给logo添加替代文本 这样有两个好处&#xff1a;屏幕阅读器能识别logo图片代表的含义&#xff0c;图片未加载到时&#xff0c;也能告诉非视障用户那里是你的logo。 几种方法&#xff1a; <img src"logo.png" alt"前端界"> 或者&#xff0c;你用背…

【消息队列】转-大型网站架构之分布式消息队列

大型网站架构之分布式消息队列 以下是消息队列以下的大纲&#xff0c;本文主要介绍消息队列概述&#xff0c;消息队列应用场景和消息中间件示例&#xff08;电商&#xff0c;日志系统&#xff09;。 本次分享大纲 消息队列概述消息队列应用场景消息中间件示例JMS消息服务常用消…

实现网站国际化

插件&#xff1a;i18n项目管理工具&#xff1a;grunt需安装&#xff1a; grunt 和properties-reader&#xff08;i18n运行依赖&#xff09;在根目录下新建i18n文件夹&#xff0c;然后把i18n-parsers.coffee和i18n.coffee放在该文件夹(两文件在笔记最后)在js下面放**.json&#…

可视化网站教程:最流行的搭建工具及必学的7个功能

摘 要 记得刚进大学的时候&#xff0c;一位教授说大学里有十件必学的事情&#xff0c;其中有一件是&#xff1a;学会做网站。无论你是学什么的&#xff0c;像数据可视化&#xff0c;演示简历、作品或产品&#xff0c;都需要前端的知识。虽然目前有各种前端语言&#xff0c;像V…

网站变更服务器要重新备案吗,网站更换服务器要重新备案吗

网站更换服务器要重新备案吗 内容精选换一换Joomla是一套全球知名的内容管理系统&#xff0c;即Joomla CMS(Content Management System)。Joomla是使用PHP语言加上Mysql数据开发的软件系统&#xff0c;是网站的一个基础管理平台&#xff0c;适合从个人网站到各种企业网站、分类…

电脑配置太低?使用这几个网站,你的电脑软件要少装一半!

你还在为你的电脑配置太低导致软件过多而卡顿感到烦恼&#xff1f;还是电脑游戏太多&#xff0c;无法运行一些其他软件而不开心&#xff1f;其实不用难过&#xff0c;小编教你们使用一些在线网站&#xff0c;可以轻松的将你的电脑上的软件少安装一半&#xff01;你们准备好了吗…

statuml怎么添加用户_网站推广好怎么样的?来看看以下指引

网站推广好怎么样的&#xff1f;很多人刚开始接触推广&#xff0c;心里会有这么一个疑问&#xff0c;怎么做才可以&#xff1f;不会做怎么办&#xff1f;网站推广并不是单单做了一个网站&#xff0c;最理想化往往跟现实差别很大&#xff0c;找对方法不迷路&#xff0c;我这边给…

php网站栏目隐藏,zblogphp代码:首页不显示指定分类ID栏目的文章(可隐藏多个分类)...

有的时候&#xff0c;我们并不想要某个分类栏目的文章显示在zblogphp首页的中&#xff0c;也就是说&#xff0c;我们可以让某一个或多个分类ID下的文章隐藏不显示在网站首页中&#xff0c;操作方法如下&#xff1a;第一种&#xff1a;判断分类方式此方法可以通过指定分类ID或分…

php301内页重定向,通过修改.htaccess批量实现网站内页301重定向跳转

本文主要介绍如何通过正则表达式实现批量内页跳转。在写之前我们先来认识几个简单的符号所代表的含义1、(.) 代表任意字符(包括汉字、英文字母等)2、(\d)代表是任意数字(仅仅是阿拉伯数字)3、$1、 $2 、$3 、$4表示的是对前面出现的变量的引用(你理解这个意思就行了)一、简单的…

linux系统服务部分,linux系统由哪几部分组成_网站服务器运行维护

笔记本如何禁用自带键盘_网站服务器运行维护笔记本禁用自带键盘的方法&#xff1a;1、首先右键点击【计算机】&#xff0c;选择【属性】&#xff1b;2、然后打开【设备管理器】&#xff0c;右键点击【PS/2标准键盘】&#xff0c;选择【更新驱动程序软件】&#xff1b;3、最后安…

Flask项目之手机端租房网站的实战开发(五)

说明&#xff1a;该篇博客是博主一字一码编写的&#xff0c;实属不易&#xff0c;请尊重原创&#xff0c;谢谢大家&#xff01; 接着上一篇博客继续往下写 &#xff1a;https://blog.csdn.net/qq_41782425/article/details/85706012 目录 一丶图片验证码前端编写 二丶短信验证码…

服务器配置iis,php网站

1.在iis中选择物理路径。配置域名 2.添加php默认文档 3.修改处理程序映射 4.设置模块映射信息 转载于:https://www.cnblogs.com/zhangyouwu/p/10277174.html

linux boost内存池,Boost内存池的分类 - 开源C++函数库Boost内存池使用与测试_Linux编程_Linux公社-Linux系统门户网站...

4. Boost内存池的分类Boost内存池按照不同的理念分为四类。主要是两种理念的不同造成了这样的分类。一是Object Usage和Singleton Usage的不同。Object Usage意味着每个内存池都是一个可以创建和销毁的对象&#xff0c;一旦内存池被销毁则其所分配的所有内存都会被释放。Single…

黑科技网站

1&#xff1a;PDF派 https://www.pdfpai.com/&#xff08;20个好用的PDF在线工具&#xff0c;完全免费&#xff01;&#xff09; PDF派 是一个完全免费的网站&#xff0c;非常良心实用。 把PDF转换成Office&#xff0c;iWork&#xff0c;图片等其他格式 把Office文件或图片…

网站加载 Waiting (TTFB) 时间过长的原因和解决办法

关注网页前端性能的朋友&#xff0c;在优化网页性能的时候都会遇到网站加载 Waiting&#xff08;TTFB&#xff09;时间过长的问题。对于没有优化过的 WordPress 站点&#xff0c;TTFB 时间经常超过了页面内容的下载时间&#xff0c;为用户带来不必要的等待时间。这个问题的主要…