First of all, this how chrome dev tools show it to me;
it looks normal and responsive, but I tried to send it to my friends and they sent me this;
As you can see, it's nothing like in my phone or chrome dev tools. Only in Iphones it looks like this. I have this code in index.html as well;
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
I also made my friend download Chrome, but it's the same result.
Depending on the devices, the size of certain things may vary. What Iphone does your friend have as well as yourself? This is important because Chrome uses those ratios and sizes to give a representation of how it will/should look. From the picture on your computer, you are testing on an Iphone 6,7 and 8 plus, but based on where the time, battery, etc. icons are on the phone screenshot, It looks as if your friend has an Iphone 10 or later.
You may use CSS media queries in order to have more control over how things are being displayed. not an answer, just a suggestion, but I hope this helps :)
Related
I'm searching for a reason and a hint why my website (Link) is not shown correctly with responsive design (based on Twitter Bootstrap) on iPhone5 Safari Browser while it is completely working correctly on desktop using IE, Chrome or Safari. Also on HTC & Samsung Galaxy the website is working correctly.
By Googling I only could find 2 solutions which are
A) cleaning the cache of the browser and
B) using
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1">
Both doesn't fix the problem. Also simulating the iPhone 5 Device in Google Developer Tool shows the website correctly while in reality the page does not show the CSS design.
Here the:
False Responsive Design Screenshot
Any idea what I need to look for as I'm running out of possible ideas.
Based on the screenshot we moved away from the Iphone theory and discovered that there was simply a problem in one of the CSS files. We had a false symbol (?) in the file and this triggered that the full CSS was not loaded correctly. It seems though that all other devices were able to compensate the mistake.
Download bootstrap to your web server and include the path in the page, so don't have to rely on another source that could go down. This should fix your problem, if not, then just try Cordova. It is possible that your your phone is being blocked by the bootstrap site because the it is going over mobile network or something like that.
Source: Personal Experience
Regards,
PRO
I'm pretty new to web development and lately I have been playing around with media queries to optimise my web page when scaled down on various resolutions.
I use the responsive design view in Mozilla Firefox to test my website at different screen sizes but I am having a problem when actually coming to view on a mobile device.
As you can see by the two picture I have attached, when viewing on Mozilla Firefox on the same resolution as my phone (for testing) the display looks a lot larger e.g. the font-size seems to be larger than what it actually is when I view the page on my mobile device.
I've tried researching into how to optimise this without having to create seperate CCS sheets for various displays and would appreciate if someone could point me in the right direction.
Thanks in advance, Sam.
Image 1 : Firefox responsive design view
Image 2 : Mobile view
May be you are missing the viewport declaration?
<meta name="viewport" content="width=device-width, initial-scale=1">
If this doesn't work a fiddle might help see what the issue is.
I'd like to be able to format my blog in a way that is usable for both desktop and mobile without attempting to detect mobile browsers. As a fan of web standards, I would think that if I used just basic HTML with no styling at all, it should be usable, but it turns out both iPhone and Android browsers render with tiny text (apparently to duplicate the layout that would be seen on desktop browsers).
I am aware I can use media queries and a dozen other techniques to get the appearance I want on mobile browsers. I'm interested in knowing if there is any way to get a mobile browser to display something at the devices default font size without resorting to font-size: 20pt; in a stylesheet. Is there any kind of "yes, this is just plain HTML, so don't try to pretend you have a desktop browser's width"?
The viewport meta does wonders for mobile devices. This will make the viewport the size of the device rather than trying to make it bigger and scaling it down:
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
You may see other versions of this with width=device-width and such. That will work, but it will also scale up your web page when it is in landscape mode (which I find undesirable). Using all these scale constraints will make sure that the viewport is the appropriate size for both orientations.
Apple, who created the viewport meta, has documentation on it.
I just want this to display the same on computers and on mobile devices, not doing any responsive design for this project.
I've gone through the CSS and commented out everything having to do with a mobile version.
However, my site is still displaying incorrectly on mobile devices. The content is showing as desired (for the most part), but the background is shrunk and narrow like it is trying to display at the mobile page-width.
I've tried multiple devices, so this is not a cache problem.
Can anyone tell me where I am going wrong?
http://www.carolinafarmstewards.org
Here's an image of what it looks like on my phone:
Try removing <meta name="viewport" content="width=device-width" /> from the head.
What special meta tags, CSS, etc. do I need to take into consideration when making my website ready to look and function right in Safari Mobile.
I didn't take much consideration to Safari Mobile until I got an iPad. I noticed that the sites I create do not always re-size correctly, look well formatted, etc. Nothing major as I am largely a front end developer.
I searched through StackOverflow and have not found a real specific outline of Safari-Mobile considerations
I am assuming that your site is already designed in a fluid manner. One of the big things for me was this:
<meta name="viewport" content="width=device-width" />
This sets the size of the viewport so when orientation changes it resizes the viewport which allows your design to reflow to the new viewport size.