将PC网站转化为手机自适应网页或者自己制作手机自适应网页其实很简单，可以利用meta标签声明。

最新推荐文章于 2024-10-21 00:55:35 发布
原创 最新推荐文章于 2024-10-21 00:55:35 发布 · 1.8w 阅读 · 34 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
web前段

当前文章被收录于：

web前段
6 篇文章 0 人学习
订阅专栏 查看详情
本文介绍如何通过三个简单步骤将现有的web网页转化为适合手机浏览的自适应网页。包括添加必要的meta标签以确保页面能在不同尺寸的移动设备上正确显示。

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.将以上标签加入之后保存，再用手机打开即是自适应网页了。


html网页在手机,HTML5网页设计自适应手机的方法
weixin_29343153的博客
06-15 3579
一般用现在常用的开发框架有：目前Web前端最火的框架(BootStrap)、Jquery mobile..当然可能还有一些移动端开发的框架。移动页面自适应手机屏幕的方法；1， 利用meta标签Meta标签主要用来描述一个HTML网页文档的属性，如作者、日期时间、网页描述、关键词、页面刷新等，它的Description和Keywords属性，可加入网站的关键字，让网页利于搜索引擎。解释：Viewp...
html手机端网页如何在手机显示
m0_48639378的博客
05-27 5139
手机查看移动端html文件
pc版网页转手机版网页中转服务
peirenlei
09-18 648
百度：http://gate.baidu.com Google：http://www.google.com/gwt/x  
带你一步步从PC（电脑）网页自适应到手机端网页（小白入门必看）
热门推荐
梁先森的博客
09-20 5万+
最近帮老师改个网站，将PC端网页改为手机端网页，虽然对于有一定开发经验的前端开发者是很easy的事情，但是呢，对于小白来说，还是很一头雾水的。下面咱们就从头来进行实战，看看自适应到手机端到底是怎么回事！ 开发必备工具： chrome浏览器 一部手机 CSS手册（推荐菜鸟教程-CSS手册） 好了，咱们开始吧！ 1、首先我先在电脑上打开网页 2、接下来使用chrome浏览器自带的手机模拟器看看这个网...
网页制作 手机端与PC端兼容
m_syndra的博客
04-19 5070
网页制作——手机端与PC端兼容手机端与PC端使用一套代码时，随屏幕分辨率的大小变化，会产生媒体查询并实现手机端与PC端的切换（一套代码）&lt;meta http-equir=”Cache-control”content=”no-transform”/&gt;&lt;meta http-equir=”Cache-control”content=”n-siteapp”/&gt;&lt;meta na...
JS：PC网站转化为手机自适应网页
Schon_zh的博客
09-28 1万+
方法一： web网页转化手机自适应网页三步走: 打开你需要制作手机网页的html或者php等等网页源码文件。在&amp;amp;amp;lt;head&amp;amp;amp;gt;&amp;amp;amp;lt;/head&amp;amp;amp;gt;之间加入meta标签。 向浏览器声明该网页为移动设备自适应网页的meta标签为： &amp;amp;amp;lt;meta name=&amp;amp;quot;viewport&amp;a
适配ie_PC网站自动适配手机网页的方法技巧
weixin_35330534的博客
01-14 1011
随着智能手机的不断发展，移动搜索的比例也在不断增加，而传统的PC站点在手机端的用户体验度较差，这就容易流失大量的用户，所以做一个对应的手机站就理所当然。如今，手机站已经逐渐成为一种潮流，基本上有点规模的PC站点都会制作相应的手机站，可是在很多方面依然存在一定的难题，例如PC站和手机站的内容如何适配才能在移动搜索占据较好的排名呢？哪种方式的流量转换更利于用户体验呢？一、PC网站自动适配手机...
如何制作手机自适应网页
Larry的博客
04-20 3671
http://jingyan.baidu.com/article/a3761b2b80b1361576f9aa81.html 将PC网站转化为手机自适应网页或者自己制作手机自适应网页其实很简单，可以利用meta标签声明。 工具/原料 sublime text 方法/步骤
网页自适应移动端及根据访问设备自动识别展示手机站或PC站
夜空下的凝视
04-02 1万+
一、7个步骤让PC网站自动适配手机网页 传统的网站如何完成向移动设备的快速转型？ 通过移动适配技术可以实现，移动适配主要通过底层的web技术开发手段来完成，下面切图网将从技术角度来告诉你通过7个步骤来完成一个PC网站向移动设备的跳跃！ 1允许网页宽度自动调整 “自适应网页设计”到底是怎么做到的？其实并不难。 首先，在网页代码的头部，加入一行viewport元标签。 <meta name="v...
尝试自动重定向的次数太多_PC网站自动适配手机网页的方法技巧
weixin_39997957的博客
11-30 767
随着智能手机的不断发展，移动搜索的比例也在不断增加，而传统的PC站点在手机端的用户体验度较差，这就容易流失大量的用户，所以做一个对应的手机站就理所当然。如今，手机站已经逐渐成为一种潮流，基本上有点规模的PC站点都会制作相应的手机站，可是在很多方面依然存在一定的难题，例如PC站和手机站的内容如何适配才能在移动搜索占据较好的排名呢？哪种方式的流量转换更利于用户体验呢？一、PC网站自动适配手机...
HTML5 移动页面自适应手机、PC屏幕四种方法
Moria
06-03 1万+
1、使用meta标签：viewport H5移动端页面自适应普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。 viewport 是用户网页的可视区域。翻译为中文可以叫做"视区"。 手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把...
一天完成把PC网站改为自适应！原来这么简单！
weixin_34306676的博客
07-28 3092
http://www.webkaka.com/blog/archives/how-to-modify-a-web-page-to-be-responsive.html   一天完成把PC网站改为自适应！原来这么简单！ 作者:Kaka    时间:2015-8-27 11:26:9    浏览:5279    评论:8 网站自适应，很多人都认为是很高级需要很多时间去实现的东西，不愿意...
网页中mobile-agent的meta信息，这样添加才更专业
最新发布
邓草的博客
10-21 828
根据百度官方公告说明，之前的Meta标签name=mobile-agent属性会继续沿用，但百度推荐使用HTML5语言制作的手机移动页面使用最新跳转适配方案，其它如xhtml、wml语言的手机移动页跳转适配，仍然需要继续使用的meta标签name=mobile-agent属性的方式。这样做更方便搜索引擎对你网站的理解。2、在手机移动版网页（www.abc.com）上，添加指向对应pc版网址的标签rel=canonical属性标记，可以帮助百度搜索引擎发现网站的PC版网页所在的位置，代码如下；
何制作手机自适应网页
JoeyLee的博客
09-03 261
何制作手机自适应网页 将PC网站转化为手机自适应网页或者自己制作手机自适应网页其实很简单，可以利用meta标签声明。 工具/原料 sublime text 方法/步骤 1 打开你需要制作手机网页的html或者php等等网页源码文件。在<head></head>之间加入meta标签。 2 向浏览器声明该网页为移动设备自适应网页的meta标...
网页常用的meta标签整理
不时髦的博客
04-20 576
网页常用的meta标签整理 概要 meta是html语言head区的一个辅助性标签，标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务； 必要属性 属性 值 描述 content some text 定义与http-equiv或name属性相关的元信息 一:...
html标记语言的meta,meta标签name="mobile-agent"属性写法及用法
weixin_36440941的博客
05-31 2039
meta标签name="mobile-agent"属性主要用于百度移动搜索，有利于搜索引擎将PC端的网站适配到手机移动端的网站，提高手机移动端访问和浏览网页的用户体验性！定义说明：百度官方对标签name="mobile-agent"属性的声明定义：“站点如果自行适配有困难，可以在PC页面中做简单改造，百度协助实现适配效果。即：站长在站点PC页的源代码头部嵌入一行或多行Meta信息，由Meta信息来...
mai模板html,纯PC网站模板改为自适应模板方法
weixin_39966130的博客
07-02 474
随着互联网WEB前端技术的发展，各项技术诞生，BS架构、HTML5、CSS3、JQ各种新的技术出现在我们的面前，今天我们就分享下只有PC站情况下，如何快速做成自适应结构，满足移动端用户体验。网站自适应结构很多人认为很麻烦，望而却步，宁愿单独另外做一个移动站。因为要做成自适应结构确实需要一定的技术才行。但是深入研究下还是不麻烦的，之前小编认为实现网站自适应，要设计很多套CSS，并且要结合jQuery...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值