I have this site and this.
I didn't add yet to them media queries (maybe in some weeks..) , but if you load the first one on a mobile phone, you will see the entire site, but if you load the second one, you will see just a part..in this latter case, how can I do to see the entire site in a mobile phone as he fist one site?
You have a viewport meta tag there:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
While it's good for responsive websites, right now you might be better off without it.
Related
The website I'm having problems with is "kayparkmemorials.com". If you view it on your laptop/desktop, and you scale the website down to your smallest possible scalable window, it appears to function as expected responsively. For some reason, when I view the site on my mobile phone, it displays the view as if it's in tablet view.
I have the max-width for mobile view set as: #media screen and (max-width: 815px)
Anyone had any previous issues similar to this and have some tips? Another important thing I should add is that when testing the site on Dreamweaver by scanning the barcode to get the preview on my mobile, it previewed as expected. I didn't change anything to the coding after that point and as soon as it is officially on the web (1&1 HOSTING), the responsiveness on mobile isn't doing what it should.
You need to add a viewport meta tag to the head of your page, if you don't do this the default behaviour for smart phone browsers is to scale your desktop page.
What you want is
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
...
</head>
Good luck!
So I have my website here: http://easenhall.org.uk/index.html
If you were to reduce the width of the browser window it changes from desktop view to tablet view, then if you keep going it will change to mobile view.
It works on desktop browsers but if you were to look at the website through a mobile it will always display the web page in tablet mode. I cant figure out why.
If you inspect the desktop webpage and press the toggle device toolbar button and try to resize the page to a mobile view, you get a similar effect, it stays in tablet view.
I have checked the console and there are no errors displayed there, I cant find anything wrong with it. Any help would be appreciated.
Try to add this to your <header>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
You have to use this meta tag after the title tag, otherwise responsive does not work
<title>This is title</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
By way of background, when Apple introduced the iPhone some time back, they anticipated the problem that nobody at the time was writing pages designed for the small screen. This included the relatively new Media Queries, which was at the time still not widely supported.
They made the decision to scale the whole screen from a larger version to the small screen. It wasn’t easy to read, but at least you could see see where everything was, and you could always zoom into the interesting part.
The scaling was achieved by creating a viewport, an off-screen virtual screen, set to a width of 960px. The page would be rendered there, and scaled to the smaller physical screen.
It also meant that CSS media queries would get a reported width of 960px, and thus would not trigger alternative styles.
Apple also introduced a non-standard meta property called viewport, which gave the developer some control over the properties of the viewport.
The most common use of the viewport property is set the viewport size to the same as the physical screen. The viewort would then report a screen size which is more correct, and CSS Media Queries can do the rest. Effectively, the viewport is commonly used to undo the scaling effect.
Desktop browsers never had this issue to begin with, so the viewport is really just the browser window. That is why the desktop always tests as expected, because what you see is really what you get.
This is what vuejs (and probably other frameworks) is doing "under the hood":
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Setting exactly this tag in the header will lead to your desired result.
I'm wondering what options are available to me here.
I currently have a client with a site that is using media queries to make it responsive.
I have also included this piece of code to allow for full width scaling..
<meta content="width=device-width" name="viewport">
My issue is that there is a table on one of the pages (its a Wordpress site). The client wishes for this table to be viewed normally (as if you were viewing a table on a desktop).
This would mean smaller text etc (the equivalent of looking at table on your mobile in desktop view).
Is there a way of doing this? I cant give it a set width like 980px for example as this will only push beyond the width of the entire page on a mobile.
My thinking was to change <meta content="width=device-width" name="viewport"> to something like <meta content="width=980" name="viewport"> JUST for that page id, this would mean the entire page would look like a desktop site. Im not entirely this will work either as there may be rules in the CSS of the headers and other parts that might react differently.
Any suggestions?
For my website I have been trying to centralize the entire content for display on mobile devices:
http://m.bachatdeals.com
As soon as I open the website on a mobile device, it has lots of space below the content and I have to pinch zoon to be able to read, how do I remove the extra space below so that my content perfectly fits in the center of the mobile device?
I have tried quiet a few CSS workarounds, but something or the other breaks my layout , please help !
Note : right now its not automatically redirecting to mobile devices so you would have to manually type in the url.
Try adding this to the head of your mobile pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I was testing this site that I just developed on wordpress: circoloshowroom.com
and I added all the proper media queries in order for it to be responsive. Now, when I resize the browser window my media queries work fine. However, when I look at the site on my phone or tablet it shows the site fully and the media queries get ignored. Any suggestions? Is it something Wordpress does to my site from the beginning.
Thanks.
I resolved this by adding this to the top of header.php file
<meta name="viewport" content="width=device-width; initial-scale=1.0">
FYI: By default, iPhone Safari shrinks HTML pages to fit into the iPhone screen. The following meta tag tells iPhone Safari to use the width of the device as the width of the viewport and disable the initial scale.
Somethis I just learned from this super helpful blog post: webdesignerwall.com/tutorials/responsive-design