I am building an app in Ionic (for browsers to begin with). I am using firefox to test and everything looks great, but when I open the page in chrome the images are significantly smaller.
I am not sure how to go about correcting this.
I read something about resetting the css? Is this what I should be doing?
Thank you for any help.
Related
I have a website developed in GWT/MGWT
I used MGWT widgets, but when I run the application on my mobile everything is really small.
I don't think it's the matter of increasing width/height, etc.
You can open it on your mobile and have a look: http://119.154.187.175:8080/dashboard2/dashboard2.html
The viewport doesn't seem to be configured correctly. Try to set
MGWT.applySettings(MGWTSettings.getAppSetting());
in your entrypoint right at the beginning.
Here is also a getting started:
https://github.com/mgwt/mgwt/wiki/Getting-started-with-mgwt
I am building a website for a friend and it's just about done, apart from a bit more content, but now he tells me that it doesn't look right on his iphone. I have checked it on Safari, Opera, IE, Chrome and Firefox on laptop, and on my Android phone and on web-based iphone emulators and everything looks fine. I had him check on someone else's iphone and 1 of the problems goes but the other remains. My site is pretty basic, html and css only, but I am the first to admit that as I am new to this my code could probably be better.
The first issue is that above the header his iphone shows there are what's best described as 5 red bricks evenly spaced along the top. This doesn't show on his mates iphone.
The second issue is that on the "products" page, the right column text under the pictures isn't lined up properly, which is the case on his mates iphone. I don't know what to do here because if I alter the padding I used to line things up, it won't be right on every other browser/device.
I'm not sure what I'm best posting on here, the whole code for the site seems too much, but whatever needed to help answer just let me know. The site address for the products page is http://www.doortodoordrinksyork.com/products.html
Like I say I'm new to this so please keep answers simple.
Thanks in advance.
David.
PS Would appreciate anyone with an iphone telling me how the site displays on it.
If you use a Mac, you can use the iOS Simulator tool that comes with XCode to test out your site in a virtual iPhone/iPod. You can even compare different versions of the built-in browser, which I think is what's causing the difference between your mate's devices.
In general, well-built sites will 'work' without modification on mobile devices, but you may want to look into media queries, a CSS feature that lets you target specific screen sizes with different rules.
I am working with a website that works well in most browsers (all I have tested) but in iPhone (4) with ios5 it doesn't look that nice.
It somehow cut appr 80-100 px off the website's right part, and thus hide text and images.
How can I set this website to force iPhone (and iPads) to show all?
The width is 1030 px. Usually I see that iPhone then "zoom" the webpage to fit the screen, but somehow not this.
Here is the site
I have been fooling around with the css to see if it helps, but now I haven't found it.
Any idea?
Do I need to use some javascript, or should I modify the design somehow?
PS: I am not looking into making a "mobile website" right now, just get the current website to show all in iPhones etc.
#Jeroen had the best answer in my situation:
<meta name="viewport" content="width=1030, maximum-scale=1.0" />
As Jeroen didn't submit as an answer I post it here as the answer :-)
I put the above meta in my website's , and it worked like a charm! Thank you Jeroen
A couple of solutions:
1) I would try media queries to specifically target smaller devices, see here: http://www.alistapart.com/articles/responsive-web-design/
2) Alternatively you could target iOS devices directly, try this solution: Loading JS script for only iOS devices?
The usual solution to this kind of problems is to create different stylesheets for different browsers. Do some research to know from where is the user connecting (IE, chrome, ipad, etc) and bind css accordingly.
I am HTML/CSS/jQuery coder. And I need to develop the website, which will be "zoomed-out" or "fitted" to 320x480 (frequently used resolution) Android mobile device screen.
Or even this solutions should check my screen resolution and connect the right CSS for that.
Somewhere I met that there is android.js file, which connects to HTML and recognizes if the website was open on PC or on android device. But I am not sure at all. I didn't do anything for mobiles before.
Found this article: http://blog.mgpwr.co.uk/2010/09/make-your-website-iphone-compatible/
Don't think it's a right solution to use PHP for that.
Better would be HTML or JS.
A very simple answer would be don't hardcode width on the elements and don't specify font size in pixels. The mobile browser will adjust the rendered page itself.
If however you want more iPhone-like look of form controls like radio buttons, buttons, drop downs, then you need to use the mobile javascript libraries outlined in the other answer.
A simple answer would be a mobile javascript library such as one of the following:
http://www.sencha.com/products/touch/
http://www.phonegap.com/home/
http://jquerymobile.com/
http://jqtouch.com/
I am using GWT-JAVA. The Login page displayed good in firefox.
But In IE It is too slow and also Fonts are too big.
In chrome it display only the background image. Nothing will be display.
Is it GWT a browser dependent? Otherwise Can i change any other options or anything else?
Thanks in advance.
GWT is intended to be browser independent, but there are limits. Are you following the advice in the "Cross-Browser Support" page?
Speed of old versions of IE will always be an issue for any browser-based UI toolkit that relies heavily on Javascript.