Launched a website yesterday, thought everything was finished, but then I went to view the website on a mobile, it isn't being responsive, yet on the desktop it is fully responsive. I've used media queries a number of times and previous websites have all been responsive. On one phone it will be be responsive, but things like the jQuery menu, titles and links are small, but the paragraphs are the size I have set them too. Yet on another phone, it is completely unresponsive. Before uploading any code, does anyone know a possible problem? Are vendor prefixes needed?
It's hard to know without seeing the site, but I had a similar problem which was fixed by including a meta viewport in the page head.
Something like
<meta name="viewport" content="width=device-width, initial-scale=1">
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.
Background: I'm trying to make an application mobile friendly. But even though it's using bootstrap, lots of divs are super tiny when viewing the application with iphone6 setting in chrome dev tools' toggle device mode.
Then I realized even though the device is 375px width,
The <body> element of the app is 980px width. And is fully showing on screen.
There is nowhere in the CSS thats forcing a width of 980px (as far as I can tell), so I'm quite confused.
I don't have much experience working on the front-end of applications so I'm afraid its a little over my head.
Note: It is a Rails application and uses some AngularJS, if that can have any impact.
Has anyone ran into this issue before, or has an idea how I might troubleshoot this?
Did you add this code to you webpage? It tells the browser to control the page's dimensions and scaling.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
It should be added inside the page's <head> tags.
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">