JS判断移动端及PC端访问不同的网站

2018-1-24 chenmo 网页设计

现在很多网站都是分为两个版本,一个pc端的一个移动端的(响应式除外),针对这两个版本,就需要对访问的设备进行判断,如果是pc,就直接访问pc网站,否则就访问移动端网站。

对于这个问题可以通过判断UA来解决,前端js可以判断,后端判断也行,这里我们主要讨论的是如何通过js来处理。

假如我们有一个网站,pc端通过www.a.com访问,而移动端通过m.a.com来访问。我们需要做的就是当移动端访问www.a.com时可以直接跳转到m.a.com。此时我们只需这样处理就可以了,在页面头部加入如下js代码:

<script type="text/javascript">
(function () { var url = location.href; // replace www.a.com with your domain if ( (url.indexOf('www.a.com') != -1) && navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad)/i) ) { location.href = 'http://m.a.com'; } })();
</script>


但是,多数情况下不止这么简单地直接从www.a.com跳转到m.a.com。我们网站除了主机名部分,后面跟的还有,比如:www.a.com/list/98/,对于这样一个url,PC就直接这样访问了,对于移动端,需要通过m.a.com/list/98/才可以呈现出比较好的效果。

那么,此时就可以用正则来处理,当移动端访问时,我们把“http://www”替换为“http://m”(冒号为英文冒号),然后更新页面就可以看到页面在移动端上呈现的效果了。具体代码如下:

<script type="text/javascript">
(function () { var url = location.href; // replace www.a.com with your domain if ( (url.indexOf('www.a.com') != -1) && navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad)/i) ) { var newUrl = url.replace('http://www', 'http://m'); location.href = newUrl; } })();
</script>

Ok,以上就是移动端及PC端网站访问的问题。


标签: 网站 js 判断 移动端 PC端 访问 不同

评论(0) 浏览(310)

零基础如何系统地学习前端开发?

2016-1-2 chenmo 网页设计

网站开发开发大致分为前端和后端,前端主要负责实现视觉和交互效果,以及与服务器通信,完成业务逻辑。其核心价值在于对用户体验的追求。可以按如下思路学习系统学习:

基础知识

1、HTML + CSS 这部分建议在 W3school 在线教程 上学习,边学边练,每章后还有小测试。 之后可以模仿一些网站做些页面。在实践中积累了一些经验后,可以系统的读一两本书,推荐《Head First HTML 与 CSS 中文版》,这本书讲的太细了,我没能拿出耐心细读。你可以根据情况斟酌。

2、Javascript 要学的内容实在很多,如果没有其他编程语言的基础的话,学起来可能要费些力,还是建议先在 W3school上学习。之后建议马上看《Javascript语言精粹》,JS是一门很混乱的语言,这本书能够帮助你区分哪些是语言的精华,哪些是糟粕,对于语言精华,应该深入学习。糟粕部分能看懂别人写的代码就行,自己就不用尝试了。

qd2015111101

阅读全文>>

标签: 网页 开发 学习 零基础

评论(0) 浏览(993)

2015年10佳在线Web开发资源

2015-5-17 chenmo 网页设计

p> 在线Web开发资源可用于查找高品质的网页设计教程,包括HTML、CSS、JavaScript等等可信赖的资源。


Web开发资源是开发人员学习开发技能和技巧的最好途径。如果你是一名优秀的Web开发人员,那么你肯定会不断寻找各种方法来提高你的设计能力,扩大你的技术库,及时了解最新的Web设计趋势。可利用的Web开发资源很多,DVD光盘、书籍……,最简单的就是互联网资源了。

今天,我们就将为大家推荐10款最佳的在线web开发资源,希望你会喜欢它们。

1、W3SchoolsW3Schools

可用于学习、测试和教程。已被简化的示例,更能有助于提高阅读和基本的理解能力。

官方网站:http://www.w3schools.com/

阅读全文>>

标签: Web 在线 开发 资源 2015年 10佳

评论(0) 浏览(812)

涨姿势!写给网页设计师的网页设计简史

2015-2-8 chenmo 网页设计

互联网的诞生本就是一个奇迹,作为其中最重要的载体之一,网页就是这个大时代最重要的缩影,相关技术、设计伴随着信息共享催动着整个时代滚滚向前。这是一段简短的网页设计发展史,我们可以看到技术、设计与思想的演进,看到无数有识之士改变世界的剪影。本文作者是网站Froont.com的联合创始人Sandijs Ruluks。当我发现设计网页有多投机取巧的方法之时,就逐渐开始对手打网页代码失去兴趣。的确,许多网页设计的问题并不止一种解决方案,但是很少有方案能解决所有的浏览器兼容性问题。最令我纳闷的是,为什么会有做设计和写代码的分工?随着技术的发展,许多在过去难以解决的问题现在可以轻松搞定,但为什么与此同时一些简单的事情反而越来越难以实现?这些问题的答案并不是简单的是与否,对与错,也许我们需要从网页设计的整个发展历程来寻找答案,找到真正弥合设计与代码之间隔膜的原因所在。

 

网页设计:黎明前的黑暗(1989)


在互联网真正开始之时,黑色的显示屏仅能显示单色的像素。可以说,当互联网天地初开之时,Web
Design

阅读全文>>

标签: 网页 设计 简史 涨姿势 设计师

评论(0) 浏览(1238)

前端开发规范之html编码规范

2015-1-16 chenmo 网页设计

原则

1.规范 。保证您的代码规范,趋html5,远xhtml,保证结构表现行为相互分离。

2.简洁。保证代码的最简化,避免多余的空格、空行,保持代码的语义化,尽量使用具有语义的元素,避免使用样式属性和行为属性。任何时候都要用尽量简单、尽量少的元素解决问题。

3.实用。遵循标准,但是不能以牺牲实用性为代价。

4.忠诚。选择一套规范,然后始终遵循。不管代码由多少人参与,都应该看起来像一个人写的一样。

语法

1.小写。html标签、html属性全部小写。

2.嵌套。所有元素必须正确嵌套。

3.闭合。双标签必须闭合,单标签(自关闭标签)不闭合。

阅读全文>>

标签: HTML 开发 规范 前端 编码

评论(0) 浏览(1091)

Powered by emlog 湘ICP备13007859号 空间由景安网络赞助