Building a single page compatible for Mobile - where to start?_问答_开发者

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

开发者 https://www.devze.com 2023-03-31 14:24 出处：网络

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

相关专题：css mobile

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 b开发者_运维问答est 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.

You need to have this in your <head> in order to make it jump to a mobile layout.

  ...

  <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" />

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.

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

If you want to use the same page for regular size displays and mobile size displays, then look at media queries so you can do adaptive design (for which mediaqueri.es 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.

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.

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:

<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" />

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