JS：PC网站转化为手机自适应网页

最新推荐文章于 2022-06-22 11:25:18 发布
最新推荐文章于 2022-06-22 11:25:18 发布
阅读量1.7w 收藏 72
点赞数 6
分类专栏： JS 文章标签： 自适应
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011374582/article/details/82883091
版权
说明：已完成网站pc端开发，后因客户需要手机端，遂要实现以下功能：
  1. pc电脑访问显示原pc端网页；
  2. 手机端访问该网页，自动跳转至手机版网页

方法一： 不改变源码，web网页转化手机自适应网页:

  1. 打开你需要制作手机网页的html或者php等等网页源码文件。在<head></head>之间加入meta标签。

  2. 向浏览器声明该网页为移动设备自适应网页的meta标签为：

     <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
 
 <meta name="apple-mobile-web-app-capable" content="yes">
 
 <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
 <meta name="format-detection" content="telephone=no">

  3. 将以上标签加入之后保存，再用手机打开即是自适应网页了。

方法二： 新增手机端源码，自动跳转

  1. 打开你需要制作手机网页的html或者php等等网页源码文件。在<head></head>之间加入script标签。

        <script>
 function onDevice() {
     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))) {

         window.location.href = "http://www.xxxx.gov.cn/site/1/html/mobile/index.htm";
     } else {
         if (window.location.href.indexOf("www.xxxx.gov.cn/") < 0) {
             window.location.href = "http://www.xxxx.gov.cn/";
         }
     }
 }
 onDevice();

 $(document).ready(function () {

     $('.flexslider').flexslider({
         directionNav: true,
         pauseOnAction: false
     });

     $('.sec1-con #banner').owlCarousel({
         items: 1,
         autoPlay: true,
         navigation: true,
         navigationText: ['', ''],
         scrollPerpage: true,
         singleItem: true
     })
     if ($("#topslider").length > 0) {
         $("#topslider").SexySlider({
             width: 1200,
             height: 182,
             delay: 2000,
             strips: 10,
             autopause: false,
             titleOpacity: 1,
             effect: 'fade'
         })
     }
 });

  2. 将以上标签加入之后保存，再用手机打开即是自适应网页了。

Schon_zh
关注
  • 6
    点赞
  • 踩
  • 72
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
网页宽度自动适应手机屏幕宽度的实现代码(viewport)
09-22
主要介绍了网页宽度自动适应手机屏幕宽度的实现代码,需要的朋友可以参考下
visamt:Vue+iView的一套自适应后台管理基础模板
05-01
visamt visamt = vue-iview-self-adaption-manage-template Vue+iView的一套自适应后台管理基础模板 演示 PC端 交流讨论 QQ群：已解散，请使用issue进行讨论
移动端+pc端自适应适配解决方案
06-29
适用于前端H5 pc端的适自创适配方案，有效解决各个尺寸适配，根据浏览器可视区域自适应元素，使用方法：将资源下载下来，放入单独js文件中，独立写成一个全局方法，如果是vue项目就在main.js中引入。如果是原生js项目，就在相应引入该方法即可
利用HTML5将现有网页转成mobile版
xincai的专栏
08-12 1222
移动meta标签 移动版的webkit浏览器支持一些比较特性，能带来更好的的浏览体验。 Viewport设置 最先要设置的meta属性就是viewport。设置viewport告诉浏览器，网页内容应该怎么样去适应设备的屏幕，同时对设备的屏幕进行优化。例如： Note: width能用px单位，如设置width=320和设置width=device-width在iphone和
将PC网站转化为手机自适应网页或者自己制作手机自适应网页其实很简单，可以利用meta标签声明。
守护大白菜的博客
08-06 1万+
web网页转化手机自适应网页三步走: 1.打开你需要制作手机网页的html或者php等等网页源码文件。在之间加入meta标签。 2.向浏览器声明该网页为移动设备自适应网页的meta标签为： 3.将以上标签加入之后保存，再用手机打开即是自适应网页了。
带你一步步从PC（电脑）网页自适应到手机端网页（小白入门必看）
热门推荐
梁先森的博客
09-20 4万+
最近帮老师改个网站，将PC端网页改为手机端网页，虽然对于有一定开发经验的前端开发者是很easy的事情，但是呢，对于小白来说，还是很一头雾水的。下面咱们就从头来进行实战，看看自适应到手机端到底是怎么回事！ 开发必备工具： chrome浏览器 一部手机 CSS手册（推荐菜鸟教程-CSS手册） 好了，咱们开始吧！ 1、首先我先在电脑上打开网页 2、接下来使用chrome浏览器自带的手机模拟器看看这个网...
pc网页调整为手机模式
m0_60402142的博客
06-22 8885
pc网页调整为手机模式
3个pc网站适配手机的方法
linjingyg的博客
12-10 5456
　　 　　新的形势下，移动网站的使用率越来越高。移动网站的优化如何做被更多的人所关注。这里切图移动就从目前三种比较常用的pc站点移动配置方式，并从性能，需求，成本方面对三者进行了分析，并给出相应的优化建议。pc站与移动站配置方式中有三种较为主流，分别是跳转适配，代码适配和自适应。下面分别对这三种给予详细的介绍和对比，希望能对大家的建站提供帮助。 　　1、跳转适配 　　利用单独的网址向每种设备提供不同的代码，这种配置会尝试检测用户所使用的设备或ua，然后使用http重定向和varyhttp标头重..
JS模拟模式窗口效果
diligentcat的专栏
09-03 993
JS模拟模式窗口效果     var falpha = 0;     function fchange() {         if (falpha != 90) {             table1.style.filter = "alpha(opacity
一段代码把PC端页面适配手机端
qq_38962479的博客
06-28 2671
在PC端的代码中加入这段代码，及实现手机端页面的自适应，是个人目前觉得最好用的方法！ <script type="text/javascript"> $(function(){ resizewin(); window.onresize=function(){resizewin()}; function resizewin() { let designSize = 192...
一个都不能死源码 一款PC手机自适应网页小游戏
03-21
今天带来的是一款PC手机自适应网页小游戏一个都不能死源码 准备一台服务器或者图片[1]-一个都不能死源码 一款PC手机自适应网页小游戏-源码库主机上传解压到服务器即可 一些文字内容在js/main.js里面修改。
30套手机网站模板自适应图片.rar
11-10
30套手机模板自适应，30套PC手机网站模板，绿 医疗，绿 农业，蓝 五金，黑 广告，红 监控，蓝 监控，棕 装修公司，红 家具，蓝 涂料，黄 装修公司，蓝 文章，黑 显示屏 ，蓝 玻璃，黑 理财，红 美食，家具 pc wap，蓝 防水 自适应，红 搬家 自适应，灰 自适应 培训等等20多个行业。
手机电脑模版自适应网站家具类
08-12
手机电脑模版自适应网站家具类
400套html5网站模板html5响应式模板 html手机自适应网页模板
01-31
400套html5网站模板html5响应式模板 html手机自适应网页模板
PC端和移动端自适应问题的快速解决方法
09-24
如何解决PC端和移动端自适应问题？下面小编就为大家带来一篇PC端和移动端自适应问题的快速解决方法。希望对大家有所帮助。一起跟随小编过来看看吧，祝大家游戏愉快哦
JS：layer.prompt层小试
Schon_zh的博客
11-05 6664
1. title可变，输入类型为text，无fromtype； 样式 代码 ``` layer.prompt({title: '请输入'+expressT+'面单号，并确认'}, function(slogisticCode, index){ layer.close(index); layer.msg('您输入的'+expressT+'面单号为：'+ sl...
JS：jquery.dataTables.bootstrap插件详解
Schon_zh的博客
12-18 3799
dataTable介绍 DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, build upon the foundations of progressive enhancement, that adds all of these advanced features to ...
JS：使用c:forEach实现下拉选择
Schon_zh的博客
11-01 3796
思路 后台生成xxlist，添加到model中 使用c:forEach将list中的xx循环出来，放到每一个option中 代码 &lt;div class="form-group"&gt; &lt;label class="col-sm-3 control-label no-padding-right" for="sendDay"&gt;发货日&lt;/label&gt;..
用html写一个pc与手机端自适应网页
最新发布
06-07
好的，以下是一个简单的示例代码，实现了PC和手机端的自适应网页： ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>自适应网页示例</title> <!-- PC端样式 --> <style> body { width: 960px; /* PC端宽度 */ margin: 0 auto; /* 居中对齐 */ } </style> <!-- 移动端样式 --> <style> @media (max-width: 767px) { /* 定义移动端的屏幕宽度 */ body { width: 100%; /* 移动端宽度 */ padding: 10px; /* 内边距 */ } } </style> </head> <body> <h1>自适应网页示例</h1> <p>这是一个自适应的网页，可以在PC和移动设备上正常显示。</p> <img src="image.jpg" alt="图片" width="100%"> <p>其他内容...</p> </body> </html> ``` 这段代码中，我们使用了CSS媒体查询来区分不同的设备屏幕大小。当屏幕宽度小于等于767px时，应用移动端样式；反之，应用PC端样式。这样就可以实现PC和手机端的自适应。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值