发表新帖
发表新帖

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

前端 未结
关注
4 983
不思量自难忘°
不思量自难忘° 2021-01-15 18:23

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

相关标签:
4条回答
  • 天命终不由人
    2021-01-15 18:39

    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.

    0 讨论(0)
  • 别跟我提以往
    2021-01-15 18:43

    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.

    0 讨论(0)
  • 轮回少年
    2021-01-15 18:44

    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.

    0 讨论(0)
  • 梦毁少年i
    2021-01-15 18:52

    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

    0 讨论(0)
 看不清?
提交回复
热议问题