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?
Related
I read on a website the following:
Mobile browsers render pages in a virtual "window" (the viewport),
usually wider than the screen, so they don't need to squeeze every
page layout into a tiny window (which would break many
non-mobile-optimized sites). Users can pan and zoom to see different
areas of the page.
I don't have much of experience, can someone please explain using other terms. I didn't understand how the mobile create a viewport and then let the user to zoom in that viewport.
It all means that the page it will fit the mobile's screen when using the meta tag , something like this:
<meta name="viewport" content="width=device-width, initial-scale=1">
So instead of the page showing like desktop view - all shrinked - and then you have to zoom in (a lot) to read, you can just simply scroll, because the content will fit properly the mobile/tablet's screen.
You may or may not be able to zoom depending on the property you use on the meta tag viewport.
This maximum-scale=1 will allow you to block zoom if your initial-scale=1
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 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.
I am just getting started with designing a Mobile App with Html,Css,Js via PhoneGap and my first goal is to ensure that all the content fits perfectly on any given phone. So I wanna ask you guys if my approach is correct, and how should I implement it.
My idea is to take the device Width and Heigh via JavaScript, I think there are some PhoneGap functions that return these values. Then I'll use this values to set the html Width and Heigh(I think I should do this via onBodyLoad() function, correct me if wrong), this way I set up the html body to the device screen size, and then I position all the other elements via % instead of pixels.
I also saw on on some random search, this line:
<meta name="viewport" id="viewport"
content="width=device-width, height=device-height,
initial-scale=1.0, maximum-scale=1.0,
user-scalable=no;" />
This looks like should work too, but Im not really sure if it does,and how it works.
Soo...what do you guys think is the best approach to do this? maybe there is some other one Im not aware of?
Thanks a lot for helping!
Depending on the elements you are using etc. you should be able to get away with just setting widths to percentages, no need for any javascript or anything of the like.
The viewport code block you posted is pretty standard Phonegap code that just makes it so you can't soom in on the page etc.
Here is a free PhoneGap framework. It has a div#body as a shell of your application, the #body has full width and height as the phone screen. everything is wrapped in #div.
I have built a new template for my website that re-arranges the content so that the sidebar is moved to the bottom in the event a small screen size (<801px) is detected. In an effort to make this as simple as possible I have reduced it to html and CSS. The issue is the phones claim to have more screen size than they do and they choose the full size display anyway. Also if I specify the media type as "mobile", the phones seem to deliberately ignore it. Is there a better way to target the mobile phones (ie android and iPhone)?
You may need the following meta tag in your head:
<meta name="viewport" content="width=device-width">