请选择 进入手机版 | 继续访问电脑版

QQ登录 无需绑定 登录 | 注册

谁知道怎么让网页在手机端自适应 悬赏1元(已结束)

回复25 | 查看191
12下一页
楼主2021-1-19 13:10:23 使用道具 显示全部楼层 举报
哪位大神知道怎么在html里面加什么代码可以让网页在移动端自动适应。
在线等

使用道具 举报

25条回复
神回复
  • 你爹
    该方法使用相同的网址(不考虑用户所使用的设备),但会根据服务器对用户所用浏览器的了解(ua),针对不同设备类型生成不同版本的HTML。

    通过终端设备ua进行判断,若是移动设备访问,那么就会返回给你一个移动端形式的网页,反之会返回一个pc端的网页,而两种网页所对应的代码是不一样的。

    为了更好的识别,需要加如下代码:

    在pc的相应的head中添加:

    <meta name="applicable-device" content="pc">

    在移动的相应的head中添加:

    <meta name="applicable-device" content="mobile">
    点赞1回复 打赏
你爹(11级)
2021-1-19 13:14:33 使用道具 显示全部楼层 举报

回帖奖励 +500 金币

该方法使用相同的网址(不考虑用户所使用的设备),但会根据服务器对用户所用浏览器的了解(ua),针对不同设备类型生成不同版本的HTML。

通过终端设备ua进行判断,若是移动设备访问,那么就会返回给你一个移动端形式的网页,反之会返回一个pc端的网页,而两种网页所对应的代码是不一样的。

为了更好的识别,需要加如下代码:

在pc的相应的head中添加:

<meta name="applicable-device" content="pc">

在移动的相应的head中添加:

<meta name="applicable-device" content="mobile">
soe问题可以加QQ免费咨询   -----  QQ:4445547

使用道具 举报

PG网络(8级)
2021-1-19 13:17:26 使用道具 显示全部楼层 举报
主要CSS控制 没法简单的跟你说,@media控制器,你在这问问不出来的,自己看视频学学 CSS吧。不是一说就上手的

使用道具 举报

夏风(14级)
2021-1-19 13:26:04 使用道具 显示全部楼层 举报
在head里面添加
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

使用道具 举报

签到达人
故事(17级)
2021-1-19 13:36:23 使用道具 显示全部楼层 举报
这个不是一串代码就能解决的事情了
靠爱发电--------------

使用道具 举报

楼主2021-1-19 14:25:35 使用道具 显示全部楼层 举报

我添加了你得代码之后,移动端不显示页面了,  你能帮我看一下吗?网址是www.yumitiao.com

使用道具 举报

楼主2021-1-19 14:25:58 使用道具 显示全部楼层 举报
故事 发表于 2021-1-19 13:36
这个不是一串代码就能解决的事情了

那要怎么弄啊

使用道具 举报

签到达人
故事(17级)
2021-1-19 14:26:44 使用道具 显示全部楼层 举报

学些CSS
靠爱发电--------------

使用道具 举报

楼主2021-1-19 14:27:03 使用道具 显示全部楼层 举报
你爹 发表于 2021-1-19 13:14
该方法使用相同的网址(不考虑用户所使用的设备),但会根据服务器对用户所用浏览器的了解(ua),针对不同设备类型生成不同版本的HTML。

通过终端设备ua进行判断,若是移动设备访问,那么就会返回给你一个移动端形式的网页,反之会返回一个pc端的网页,而两种网页所对应的代码是不一样的。

为了更好的识别,需要加如下代码:

在pc的相应的head中添加:



在移动的相应的head中添加:

大神,我直接在head里面加上你这两行代码可以吗?

使用道具 举报

炫火(15级)
2021-1-19 15:07:34 使用道具 显示全部楼层 举报
可以找bootstrap,这个会自适应,可以看我的站点,就是这样的布局
每日一笑话 ,www.xiaogouyu.top

使用道具 举报

楼主2021-1-19 15:18:06 使用道具 显示全部楼层 举报
炫火 发表于 2021-1-19 15:07
可以找bootstrap,这个会自适应,可以看我的站点,就是这样的布局

你网站我看了,是这一行代码吗?
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

使用道具 举报

手赚网(6级)
2021-1-19 15:31:00 使用道具 显示全部楼层 举报
单页还是好弄的,css控制显示就好了
www.appzuan.cn www.woyaowz.com www.kozhuan.cn

使用道具 举报

楼主2021-1-19 15:32:42 使用道具 显示全部楼层 举报
手赚网 发表于 2021-1-19 15:31
单页还是好弄的,css控制显示就好了

能加个QQ 教一下我吗? 大神

使用道具 举报

重新做自适应的模板
紫霞生活网 https://www.zixiaw.com

使用道具 举报

加一个meta标签
<meta name="viewport" content="width=device-width,initial-scale=1.0">
这个是HTML的
百度上可以查到,原谅我只是一个初级软件开发工程师
个人网站 公司网站 国内外服务器出租

使用道具 举报

强子(7级)
2021-1-19 17:42:05 使用道具 显示全部楼层 举报
你爹 发表于 2021-1-19 13:14
该方法使用相同的网址(不考虑用户所使用的设备),但会根据服务器对用户所用浏览器的了解(ua),针对不同设备类型生成不同版本的HTML。

通过终端设备ua进行判断,若是移动设备访问,那么就会返回给你一个移动端形式的网页,反之会返回一个pc端的网页,而两种网页所对应的代码是不一样的。

为了更好的识别,需要加如下代码:

在pc的相应的head中添加:



在移动的相应的head中添加:

添加这两个代码 就能自适应?有这么神奇吗?

使用道具 举报

炫火(15级)
2021-1-19 17:46:35 使用道具 显示全部楼层 举报
301跳转专家 发表于 2021-1-19 15:18
你网站我看了,是这一行代码吗?

不是哦,我的布局代码是一套的,不是只有一行的哦,一行搞不定的
每日一笑话 ,www.xiaogouyu.top

使用道具 举报

刚进来(10级)
2021-1-19 17:49:32 使用道具 显示全部楼层 举报
csdn,博客园里逛逛,有很多自适应代码示例。
一两行代码解决不了

使用道具 举报

手赚网(6级)
2021-1-20 12:14:38 使用道具 显示全部楼层 举报
301跳转专家 发表于 2021-1-19 15:32
能加个QQ 教一下我吗? 大神

有时间可以教你
www.appzuan.cn www.woyaowz.com www.kozhuan.cn

使用道具 举报

你熟悉浏览器吗?

使用道具 举报

12下一页
您需要登录后才可以回帖 登录 | 1秒注册
高级模式

广告联系|Archiver|手机版|小黑屋| 站长论坛

GMT+8, 2021-3-2 03:34 , Processed in 0.201939 second(s), 123 queries , Gzip On, MemCached On.

Powered by Discuz! X3.3

© 本站内容均为会员发表,并不代表本站长论坛立场!

快速回复 返回顶部 返回列表