I just uploaded a site that I've been working on locally and got some unexpected glitches that I'm not too sure how to fix, nor do I know why they happened.
The reponsiveness of the blog page here,works fine when you shrink the browser on our desktop, but if you look at it on a phone, it is not responsive at all. Anyone have any ideas?
Your phone has something what is called a Viewport. This is probably what makes it look bad.
Try adding this meta-tag:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
Check this link to get more info about those viewports: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
Related
I am trying to create a web page and I've added some media queries for managing how the website looks depending on the width of the device. The problem is that, for example, a media query set to affect devices under 800px DOES work if you resize chrome in your computer, but it DOES NOT work in phone devices, even though the condition (less than 800px) is fullfilled.
I'm including a link to the website so that you can check this out on your computer/phone
https://serchpics.github.io/Homepage/
I would really appreciate the help because I can't figure out why this might be happening. Thx! :)
Your site doesn't have a viewport set, so it zooms out every time you load the page.
You can set a viewport by putting this code under your <meta charset="utf-8"> tag.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
You can learn more about viewports here
Try to add into <head> section:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
I just started learning html/css/javascript and decided to throw together a website for practice. I now know that a lot of the approaches I took in creating this website are seen as bad practice, which is why I will not continue to do them. What i'm having issues with is getting the mobile layout I see on Firefox's mobile emulator to appear as is on an actual mobile device. Any advice on how to fix this issue?
Thanks in advance!
Website Files
Most modern browsers have some basal CSS-styling already: if you type in a <h1>sentence</h1> like this without the basic HTML elements, Chrome will still deliver the webpage.
I built a basic web-design framework like Bootstrap, and these three lines are critical in making a responsive webpage. Make sure to add them at the top of the <head></head>.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Language" content="en">
<meta name="viewport" content="width=device-width">
The dropbox files wouldn't open, so I haven't seen your work. Try adding these and see if it works.
Try adding this meta tag to your pages, in the <head> element:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
I had this issue with Bootstrap awhile ago and then found this nifty answer online. I also would recommend using something like Bootstrap or Materialize.
I've made a mobile version of a webpage and it works on Android and small browser windows without problems.
On iOS however, when a user pinches the screen, it zooms out to fit the entire page on the screen. It's a long page, so this is not ideal.
I have the following in my head:
<meta name="viewport" content="width=device-width,
initial-scale=1.0, user-scalable=no, shrink-to-fit=no">
I'm aware that iOS 10 has a known issue with overriding user-scalable=no, but this is happening also on iOS 9 and 8.
Does anyone have any ideas how I might be able to solve this?
Many thanks
The correct format of that meta tag is as follows:
<meta content="initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=0,width=device-width" name="viewport">
Morning All,
I'm hoping someone can advise me on the amendments I need to make to my website's CSS to make it display correctly on a mobile device.
At the moment when you view the website in mobile device the menu navigation is displaying at the same size as if it was on a desktop PC, but the rest of the website looks absolutely fine.
From which I can see the navigation uses % once it hits a specific width.
So how can I correct this issue?
I look forward to hearing your fixes.
Please see the website below:
http://www.blanchel.com/
try this:
<meta name="viewport" content="width=device-width, minimum-scale=1.0" />
if you don't want to allow zooming, add max-scale at the end:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
I'm trying to get my website to be displayed at full scale in any mobile device, like in this example:
As of now, the website opens automatically zoomed-in, and my clients don't like that. I thought adding the line
<meta name="viewport" content="width=device-width, initial-scale=1">
would solve this, but it does nothing. I've tried playing with the initial-scale value to see if it worked and it does nothing. I've set it to initial-scale=0.5, for example, and it didn't change the way the page displayed (to clarify, it doesn't work neither on desktop browser nor on mobile devices).
I've been working on this for days, any help would be greatly appreciated!
EDIT: To clarify, this is a mockup of what I get vs. what I need.
Try to add the meta tags below:
<meta name="viewport" content="user-scalable=yes">
<meta name="apple-mobile-web-app-capable" content="yes"/>
and see it your request will be resolved.