建站百科

网站建设、网站设计、网站开发、域名、主机、服务器等知识普及

网站跨屏适配手机端的3种方式

最近更新于 2020-07-28 - 跨屏互联-建站
文章导读:本文主要阐述了“网站跨屏适配手机端的3种方式”移动互联网已经来了很长时间了,网站移动化分两种:独立做手机版和 pc网站做跨屏适配自适应等处理。这里我不太主张独立做手机版...,本文由跨屏互联最后更新于2020-07-28,全文共1546个字,预计阅读时长5分9秒

 移动互联网已经来了很长时间了,网站移动化分两种:独立做手机版和 pc网站做跨屏适配自适应等处理。这里我不太主张独立做手机版网站,因为开发成本慢,周期长,维护麻烦等,而且纵观微软、adobe、苹果等互联网巨头的官网,并没有独立的手机端,都是采用跨屏自适应的方式。

下面讲讲网站适配手机端的3种方式

1. PC端的设计与手机端相差不大,利用 @media媒体查询 调整百分比

2. PC端与手机端的设计分离,利用判断设备的方式做301跳转

3. 跨屏网一句话JS,网站快速移动化。

下面就结合源代码讲一讲如何实际实现这三种方案:

第一步:在html代码中添加如下代码
<meta charset=”utf-8″ />
<meta content=”width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0″ name=”viewport”>
<meta content=”yes” name=”apple-mobile-web-app-capable”>
<meta content=”yes” name=”apple-touch-fullscreen”>
<meta content=”black” name=”apple-mobile-web-app-status-bar-style”>
<meta content=”320″ name=”MobileOptimized”>

第二步:

方案一:设置PC端内容区域width:1100px,添加如下代码:
.container{ width:1100px; max-width:100%; }
.container img{ max-width:100%; }

@media only screen and (max-width: 480px) {
//此适配不同手机型号下文字,图片的大小
}

@media only screen and (max-width: 375px) {

//此适配不同手机型号下文字,图片的大小
}

..//可继续

方案二:在PC端公共Header中,添加如下JS
<script type=”text/javascript”>
if (window.location.toString().indexOf(‘pref=padindex’) != -1) { } else {
if (/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))) {
if (window.location.href.indexOf(“?mobile”) < 0) {
try {
if (/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
window.location.href = “手机端链接”;
} else if (/iPad/i.test(navigator.userAgent)) {
} else {
}
} catch (e) {
}
}
}
}
</script>

方案三:跨屏网Kuaping.com 一句话JS引用,网站快速移动化

这是一个对于网站主来说是一个非常傻瓜的操作,只需要在网站添加一句js代码,就和在网站添加代码统计一样简单,网站即刻移动化,而且不影响网站原有seo效果(因为搜索引擎不识别js内容),反而在手机下的优化效果有提高,因为手机访问的体验变好了。

写在最后,以上就是对于“网站跨屏适配手机端的3种方式”的一些看法,欢迎指正、交流。

网页标题:网站跨屏适配手机端的3种方式
转载来源:http://www.kuaping.com/article/show267.html

相关文章推荐
推荐模板
外贸网站kptrade模板,响应式宽屏,多语言2024
编号:default#kptrade2024
跨屏五合一响应式网站官方旗舰模板kpsvip 2024版本
编号:default#kpsite2024
简约货运物流快递公司网站模板
编号:1st#wuliu
AI生成白色简洁设计师网站模板下载
编号:1st#baisejianjie
高端旅游线路推荐旅行社官网模板
编号:part2#lvyouluxian
免责声明:本站是自助建站平台,仅提供信息存储空间服务,该信息内容的真实性及合法性由该发布者完全负责。
咨询客服

10年品牌 专注五合一网站

前台客服

技术客服

027-817-77732

133-434-77732

关注我们

关注跨屏互联公众号

回到顶部