blocks|key|350028|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|350029|我的问题是，我该怎么做呢？|blockquote|350030|350031|350032|如果你想对普通尺寸的显示器和移动尺寸的显示器使用相同的页面，那么可以查看media+queries，这样你就可以使用adaptive+design+(+mediaqueri.es提供了一些示例。|offset|length|350033|无论您是否想要适应显示尺寸，唯一的其他主要因素是测试。确保在一系列设备和浏览器上进行测试。|350034|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/css3-mediaqueries/|1|http://webdesignerwall.com/tutorials/adaptive-responsive-design-with-css3-media-queries|2|http://mediaqueri.es/^0|0|0|0|0|10|D|0|1M|F|1|24|D|2|0|0^^$0|@$1|2|3|-4|4|5|6|X|7|@]|8|@]|9|$]]|$1|A|3|B|4|C|6|Y|7|@]|8|@]|9|$]]|$1|D|3|-4|4|5|6|Z|7|@]|8|@]|9|$]]|$1|E|3|-4|4|5|6|10|7|@]|8|@]|9|$]]|$1|F|3|G|4|5|6|11|7|@]|8|@$H|12|I|13|1|14]|$H|15|I|16|1|17]|$H|18|I|19|1|1A]]|9|$]]|$1|J|3|K|4|5|6|1B|7|@]|8|@]|9|$]]|$1|L|3|-4|4|5|6|1C|7|@]|8|@]|9|$]]]|M|$N|$4|O|P|Q|9|$R|S]]|T|$4|O|P|Q|9|$R|U]]|V|$4|O|P|Q|9|$R|W]]]]

<blockquote>
 My question is, how do I go about doing this?
</blockquote>

If you want to use the same page for regular size displays and mobile size displays, then look at <a href="http://www.w3.org/TR/css3-mediaqueries/" rel="nofollow">media queries</a> so you can do <a href="http://webdesignerwall.com/tutorials/adaptive-responsive-design-with-css3-media-queries" rel="nofollow">adaptive design</a> (for which <a href="http://mediaqueri.es/" rel="nofollow">mediaqueri.es</a> has some examples.

Whether or not you want to adapt to display size, the only other major factor is testing. Make sure you test on a range of devices and browsers.

blocks|key|2237865|text|你需要在你的<head>中有这个，以使它跳转到移动布局。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2237866|++...

++<meta+http-equiv="X-UA-Compatible"+content="IE=edge,chrome=1"+/>
++<meta+name="viewport"+content="width=devide-width,+initial-scale=1.0"+/>

++<title>+...+</title>

++...

++<link+href="/stylesheets/mobile.css"+media="only+screen+and+(max-width:+767px)"+rel="stylesheet"+type="text/css"+/>|code-block|syntax|javascript|2237867|然后使用mobile.css样式表设计移动站点，它将被媒体查询自动拾取。|2237868|希望这能有所帮助。|2237869|entityMap^0|6|6|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|V|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

You need to have this in your <code>&lt;head&gt;</code> in order to make it jump to a mobile layout.

<pre><code> ...

 &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /&gt;
 &lt;meta name="viewport" content="width=devide-width, initial-scale=1.0" /&gt;

 &lt;title&gt; ... &lt;/title&gt;

 ...

 &lt;link href="/stylesheets/mobile.css" media="only screen and (max-width: 767px)" rel="stylesheet" type="text/css" /&gt;
</code></pre>

Then design the site for mobile using the mobile.css stylehsheet and it will be picked up automatically by the media query. 

Hope this helps.

blocks|key|2237726|text|你可以根据手机屏幕调整页面大小。例如，页面宽度最大为480px，避免图片过大，不使用java脚本等。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2237727|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

You can just fit page to mobile phone screen. For example, page width is maximum 480px, avoid too big pictures, do not use java scripts etc.

blocks|key|2237830|text|你是对的，你应该从一个mobile.css开始。你也应该使用mobile.js，因为大多数繁重的javascript是不需要的，而且你希望保持较低的请求数量和较小的文件大小。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2237831|我建议在后端有一些东西，它可以防止加载常规的.css和.js文件，可能是基于用户代理(这方面的最好方法是另一个主题)。否则，您将不得不覆盖原始.css文件中的所有样式，这对于提供给移动设备的信息来说太多了。|2237832|如果你想要制作整个网站的移动版本，这将是一种方法。因为您只提到了一个页面，所以您只需要创建一个简单的.css文件和一个(简单的)页面来填充移动设备的整个屏幕，使用如下所示：|2237833|<meta+name="viewport"+content="width=device-width,+height=device-height,+user-scalable=no"+/>|offset|length|style|CODE|2237834|同样，请确保不要加载不必要的.css和.js文件|2237835|entityMap^0|0|0|0|0|2L|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|S|8|@$H|T|I|U|J|K]]|9|@]|A|$]]|$1|L|3|M|5|6|7|V|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|O|$]]

you are correct in that you should start with a mobile.css. You should also use a mobile.js, as most heavy javascript will not be needed, and you want to keep the number of requests down and file sizes small.

I would suggest having something on the back-end though, which prevents the regular .css and .js files from loading, possibly based on the user-agent (the best method for this is a whole other topic). Otherwise, you would have to overwrite every style in the original .css file, which is way too much info to feed to a mobile device.

That would be the approach if you wanted to make a mobile version of the whole site.
since you mentioned only one page, you will just need to make a simple .css file and a (simple) page which fills the entire screen of the mobile device, using something like this:

<code>&lt;meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" /&gt;</code>

once again, be sure not to load unnecessary .css and .js files

I've got a site that isn't mobile enabled, but as part of a campaign, we are going to be sending out a QR code that contains a voucher to link through to a "hidden" page on this site. Of course as users are going to be accessing this page from a mobile phone, this page needs to be mobile enabled. 

My question is, how do I go about doing this? 

I know that you need a separate mobile style sheet but I've never done this before. Is this the best approach? I only have access to the front end of the site, so is there anything that needs to be done on the back end?

Thanks in advance and apologies if this seems a bit vague.

Building a single page compatible for Mobile - where to start?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我有一个不支持移动功能的网站，但作为活动的一部分，我们将发送一个二维码，其中包含一个优惠券，可以链接到这个网站上的一个“隐藏”页面。当然，由于用户将通过移动电话访问此页面，因此此页面需要启用移动功能。我的问题是，我该怎么做呢？我知道你需要一个单独的移动样式表，但我以前从未这样做过。这是最好的方法吗？我只能访问站点的前端，那么在后端有什么需要做的吗？提前感谢，如果这看起来有点含糊的话，我很抱歉。

问为Mobile构建兼容的单个页面-从哪里开始？
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为Mobile构建兼容的单个页面-从哪里开始？EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为Mobile构建兼容的单个页面-从哪里开始？
EN