I’m new to web-dev and don’t know if this is working as intended, but it seems odd to me. Briefly, disabling touch even simulation causes my webpage to be rendered differently (see attached photos). Is this due to my code, Firefox dev tools, or something else?
Thanks.
Code Here: Codepen
You need to add following code to the head section (before title tag):
<meta name="viewport" content="width=device-width, initial-scale=1">
From HEAD
meta name="viewport" - viewport settings related to mobile responsiveness
width=device-width means that it will use the physical width of the device (instead of zooming out) which is good with mobile friendly pages
initial-scale=1 is the initial zoom, 1 means no zoom
For more info about viewport tag see: Using the viewport meta tag to control layout on mobile browsers
Related
I'm not sure what the heck is going wrong here. Whenever I preview my site on a renderer like this, example, my site displays differently from an actual phone display. This is making it very difficult to test and adapt for other screen sizes.
I'm doing a mobile-first layout, but everything was working just fine until chrome started acting up (something my department isn't allowed to fix, so that's not an option) which is why I'm resorting to these types of sites. Also, the only other browsers I'm permitted to use are IE and Edge.
Any advice would be appreciated, thanks.
Your page is missing a viewport meta tag in the <head>
Adding <meta name="viewport" content="width=device-width, initial-scale=1"> should make the page render as expected on mobile devices.
Please take into consideration I am pretty new to programming and only know basic things!
Currently, the header on my shop has not got a width set and works fine on the desktop site > feel free to visit to view www.Part-Box.com
However, when the site is loaded on a mobile device or a tablet, the view changes and the header is cut off > you can test this by resizing the browser on a pc. Basically I want the mobile version and desktop version to be exactly the same. There is currently a zoom on the mobile version and half of the header gets cut off.
I've tried setting the header to have a width of 100% in the css which works but completley rearranges everything in the header, can anyone help? thanks guys.
(it would be a lot easier to understand with pictures sorry)
Solution found by removing a line of code
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Per comments above: the OP wanted their website to look the same on desktop and mobile. That is, no layout re-ordering, re-sizing or re-styling.
To do what you want we need the mobile browser to zoom out so the whole page can be seen. This happens to be what mobile browsers do by default.
The reason this is not happening for you is because you are using a meta tag that is widely used for Responsive Web Design layouts:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Remove that tag from the page and you should see the results you are looking for.
**I realize that this isn't an ideal user experience choice but this is what the OP asked for.
I have made an existing site to responsive using twitter bootstrap. When I check the responsiveness by resizing the browser it works fine and perfectly fit in the viewport window. But when I check the site across mobile and tablet it does not work and show the default desktop layout. I have used meta viewport tag and respond.js But It does not work anymore. I can not understand why the site does not resonsive in specific mobile device.
Can you help me out from this issue? I can not preview the code in here, because I can not understand where is the problem exactly.
My demo site: playbox
Because of
<meta content="width=1024" name="viewport">
set
<meta content="width=device-width" name="viewport">
Remove second one width=1024 and you'll be good to go :)
Using bootstrap, when I resize the width of browser window on PC, everything looks splendid, all elements relocate like they should. But when I visit this page on phone - it just loads the full website zoomed out, so it fits all the page, which looks like a fullscreen on PC, with minute letters and images, as if I didn't waste hours making it responsive! Am I missing something?
Are you using the viewport meta tag? If not, I think it might be the way to go:
<meta name="viewport" content="width=device-width, initial-scale=1">
I have a small mobile phone app that is acting strangely on the iPhone/Mobile Safari. The page renders and works great when it's orientation is vertical. When I rotate the phone horizontally some, but not all elements on the page resize correctly. Some header elements will stay nearly their same size, maybe increasing by 10%, others will double in size.
Has anyone run into this? My first thought was that the css could have a mix of sizes based on ems and px's but finding every size element and converting them to em's didn't change a thing.
It's because Mobile Safari on iPhone & iPod Touch does automatic font-size adjustment.
You can disable it with the following css rule,
html {-webkit-text-size-adjust:none}
More info from Safari Reference Library
Have you tried including a viewport meta tag, such as this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
Otherwise, you could try creating orientation-specific CSS stylesheets and swap them out w/ javascript when the orientation change event fires, but I prefer the meta tag method above.