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.
Related
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've created the following web page:
http://isometricland.net/games/games.php
The problem is that on my Lumia, in UC Browser as well as Edge, the text is tiny. (Everything is rendered tiny, in fact. I have to zoom in in order to read anything.)
Is this a problem with my CSS code? Or, are the mobile browsers falsely reporting the device's screen dimensions? I wrote some media queries to render slightly different styles based on the size of the screen in em units, but the lowest sizes are not being detected.
I would like to fix this if the problem is with the web page, but I have no idea how to tell if it is the web page's fault, or what the problem is.
Please help!
Try adding the following to your <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
For further information, see Using the viewport meta tag to control layout on mobile browsers.
The next problem you're going to face is your use of tables. These will cause the page layout to be much wider, since they don't wrap. What you could do is place these within a responsive wrapper that will scroll any additional overflow:
<div class="scroll-overflow">
<table>...</table>
</div>
div.scroll-overflow {
overflow-x: scroll;
}
Lastly, you're loading a full 728x90 advertisement at the bottom of your site. This too is going to cause the overall layout to be very wide, and thus display as much smaller on your screen.
You should either place a much narrower ad here, or restrict the ad-width with CSS. And with these small changes, your site immediately becomes many times more friendly to mobile users.
Here's a before (left), and after (right).
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?
I am looking for a CSS package that will aid one in building a fluid/responsive layout with scrolling content... I don't know if I'm describing this accurately, but what I mean is represented well here and here.
there are others, but those 2 show it well enough.
Any tips to that? Am I overthinking things, and it's as simple as one big column-less CSS grid (i.e. I could even use twitter's Bootstrap as a starting place)? I've tried some simplistic designs with this, but it never seems to work for every device / every time I resize the screen.
Thanks all for the help.
When doing responsive design, you'll want to make sure you set a meta tag to viewport initial-scale value of 1. Mobile devices tend to pack more pixel values into actual pixels so that they fit on the screen, but if you set the viewport's initial-scale value to 1 then you're essentially telling the device you want the page to be viewed on at a 1 to 1 pixel ratio.
Add this to your header:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" >
I've come up with several Fixed width CSS Frameworks such as 960px GS and grid Generators. The problem with them I found is their fixed width. although it works best with Normal screen but Can I get or someone assist me with a CSS Framework that uses the entire width of the screen available. No of columns, gutter width etc are not much concerning factors.
Thanks in advance. :)
Making % based grids are incredibly easy, I think unless you're going to be using all the features of something like Bootstrap, you're just giving yourself a lot of extra bloat. Making a responsive grid system takes no more than 10/20mins and you'll have exactly what you need, nothing more, nothing less.
Here's a video about making a simple 2 column, % based grid.
And here's a blog post going through pretty much the same thing if you prefer to read about it.
To make mobile specific CSS you'll need some media queries going on, here's a post about that.
Also, if you're going to use media queries, don't forget to put:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
in the head of your pages.