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.
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
Related
I have designed a fully responsive web page using Reactjs on the browser, but when I opened it on a real phone, there were things that are "off", although I designed it on the browser for the same phone. Why is that? I have that meta tag <meta name="viewport" content="width=device-width, initial-scale=1" /> set in the index.html. The problem with this I would never know how it would look like on the real device before deployment, which is time-consuming and tedious. Why is this happening?
The browser engine on your computer and on your phone might not be the same.
Are you using the same browser on both? like chrome??
If that is not the case, there will be some differences.
Hope that helps.
I'm running Facebook Ads for one of my clients, however, his website is quite old and there are a few pages that aren't being responsive in mobile version. I know basic HTML & CSS, enough to do simple coding but am not sure where to start with this issue.
Issue: The linked pages are below with images attached. In mobile version the main content div is basically only taking up three quarters of the screen. The rest of the client's pages are fine (occupy the whole screen) when on mobile.
http://stkildafitnesstrainer.com.au/our-trainers.html
http://stkildafitnesstrainer.com.au/services.html
Thanks for your help
Edit:
Seeing the comments below, and as I was too young to care about disabilities. I'm sorry, this is the new answer:
Simple, add this in your head:
<meta name="viewport" content="initial-scale=1">
initial-scale, as the name says, define which scale your website will be rendered.
There is also other parameters to the content tag:
width=device-width sets the <body> width to be the same of the device, just like height=device-height is the same for height.
user-scalable=no, this says you are not able to zoom the page AND IT'S NOT RECOMMENDED, you can also set this parameter to yes.
I built a site using HTML, CSS, and Javascript. It has two layouts I would like the site to choose automatically using the screen size. To do this, I linked to two CSS files in my index file. Here is how I formatted it.
<link rel="stylesheet" media='screen and (min-width: 750px)' href="css/largeScreen.css">
<link rel="stylesheet" media='screen and (max-width: 750px)' href="css/smallScreen.css">
This works on my computer when I change the size of my browser window. However, when I uploaded my site online and accessed it with my phone, I realized that it doesn't pick the correct layout (should be from the smallScreen.css file).
If anyone can help me with this issue, it would be greatly appreciated. :)
Like #ThomasAltmann said, have you set
<meta name="viewport" content="width=device-width, initial-scale=1.0">
in your <head>? I came accross this issue that had me stumped for hours before realizing I forgot this tag. This tells mobile browsers not to automatically scale the website to display it as if it were on a normal desktop-sized window.
I have been using the materialize css framework to style most of my apps recently. When I loaded up the app I'm currently making on my phone it appeared way more zoomed out than it normally does. (See top two photos). The way it previously looked was much more zoomed-in and large (bottom two photos).
I've tried searching around for solutions but I'm not too sure what I'm looking for in terms of a setting that might be different between the two materialize releases or something.
Basically, how can I get my current site to render larger like the old one does? Is this in a media query somewhere?
I haven't changed my styling between these two apps. Really not sure what would have changed.
Thanks for any help!
Are you missing a viewport meta tag in your HTML?
<meta name="viewport" content="width=device-width, initial-scale=1">
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
I have designed my site to be responsive without actually using
<meta name="viewport" content="width=device-width, initial-scale=1.0">
It looks just the way I want it on mobile. The problem is, when I go to Google Insights, which to test if my site is mobile optimized, it says it is not. When I add the meta tag, it says my site is mobile optimized (even though it looks a lot worse to a human being).
My question is, can get around using the meta viewport tag while still having Google Insights tell me my site is mobile optimized and therefore adding that SEO benefit.
You don't want to be setting the viewport width to a specific size. This will make all devices view it as that set size.
Change it to 'device-width' like below and it will size to the devices width.
<meta name="viewport" content="width=device-width,initial-scale=1" />