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.
Related
Question: what might be the cause of the iframe not working properly only on IOS, iphone?
It seems like it's zooming in automatically, but that is not the intention
How can this be fixed?
Sounds like the viewport issue to me.
I've seen this before... Here is a solution that might work for you in this case.
<meta name="viewport" content="width=device-width, user-scalable=no" />
Add/modify this tag in your and let me know if it works.
Note that by doing this you will be removing the option for the user to pinch and zoom on your site. Most the time you don't have to care about that but some users depend on the functionality.
My bootstrap pages are designed responsively. The viewport is stated as required:
`<meta name="viewport" content="width=device-width, initial-scale=1.0" />`
(without the backticks)
In browsers I tested (Safari, Chrome, Firefox), the responsivity works well.
However, iPhones and other smarthphones always show the desktop view.
What am I doing wrong? This is a test page for you to see (sorry it's still a little cluttered):
http://zhaw.warnez-services.ch/NaKt/stackoverflow.php (LINK UPDATED)
Interestingly, using a Cloaking service, they send their own head and suppress my viewport instructions.
Thank you for any hints.
Viewport tag is not yet added.
Add <meta name="viewport" content="width=device-width, initial-scale=1.0" /> inside the <head></head> of your HTML/PHP.
The problem is/was the cloaking service. (nic.ch.vu).
It allows to hide the real address and camouflage it with a free and custom one.
If you choose the cloaking option, the address you typed in the address bar will never change, no matter what you click.
These services sent their own head sections, and the viewport tag gets suppressed for some reason.
If you run into the same problem, you must disable cloaking or use the real address.
Thanks to all posters for their help!
Well, seems that page you provided is missing the meta - viewport tag in its source.
your meta Tag is correct, uhmm i see you only have one css link ""... Question is it repressive? If not check out these tutorials on reponsive design helped me as well.
http://www.sitepoint.com/building-responsive-websites-using-twitter-bootstrap/
http://getbootstrap.com/css/
Hope that helps
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
I am currently working on a Html 5 WebApp. The entire app works perfectly fine, with the exception of scalability (Zooming). I have placed the following Meta tag on my WebApp's page,
<meta name="viewport" content="user-scalable=yes; width=device-width; height=device-height; initial-scale=1.0;" />
After much research I have come to the conclusion that these Meta tags are primarily for the iPhone version of safari. However, the problem that I am experiencing is, while an iPhone user is on my site, previous to bookmarking the WebApp to the home screen, the user is not able to zoom in or out (using the pinching motion). The only way that that seems to create a zooming in effect, is if the user changes the orientation of their phone.
I have tested this meta tag with both an Apple device, and an Android device. The Android device disabled zooming when user-scalable = no, and allowed zooming when user-scalable=yes, while the Apple device never allowed zooming in either of the two testing cases.
My Questions Are:
Are these Meta Tags primarily designed for iPhone Safari browsers?
Am I correctly using the above Meta Tag?
If I am not, What is the proper way to use the Meta Tag?
Thank you for your advice in advance!
I could be wrong, but I don't think you need the user-scalable line at all. Have you tried removing that and seeing what happens? Something like this is usually sufficient:
<meta name="viewport" content="width=device-width" />
… and then maybe tweak from there. If you do want to use all the attributes, try separating them with a comma rather than a semi-colon. For example:
<meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1.0" />
I am building a web app, which is intended to run on the Android browser.
When I have a webpage that contains any kind of viewport meta tag, like this:
<meta name="viewport" content="width=400"/>
My webpage crashes on ajax calls. It happens when using the emulator, the actual browser on my nexus one, and on a droid (all running Android 2.1).
Without the meta tag, the ajax calls run as they should.
Any ideas?
You may try using the below meta tag.
I have successfully used both these meta tags and AJAX calls did work for me on the Nexus One.
<meta name="HandheldFriendly" content="true" />
Also, it's recommended these days that you set content="width=device-width" and style the page with CSS to look at least tolerable. Otherwise you get a ridiculously zoomed-in page on the iPad.
Of course, never mind if you already have a way of dealing with that.