I'm working on the mobile version of my company's web site. I redesigned everything using CSS mediaqueries and serverside PHP to perfectly fit in the mobile viewport.
One big problem is facebook's like button.
It is unbelievable small and nearly impossible to click without zooming in. Is there someone with a similar problem? How did you solve this task?
Thanks in advance!
Related
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've been displaying a like-button on my mobile websites for quite some time now using an iframe. For a few weeks now the size of the button has increased on all mobile devices, but not on for example the iPad or desktop browsers.
Does anyone know why this is happening or what I can do to show the old size, because that fitted perfectly. Now it's too big for it's container.
Thanks in advance,
Cyril
Seems like a bug you should log with Facebook. Log it at: https://developers.facebook.com/bugs
Hi I am developing a site for desktop.The site renders the contents for desktop size.But when I see it in mobile the content is not properly rendered.
How can I make a site that fits all mobile screen sizes say Blackberry,Android,iPhone, etc. Can anybody mention any articles. I know only HTML. Thanks in advance.
I remember looking into myself a while ago and finding this video tutorial on net-tuts+ to be a good starting point
It is hard to make a single site that looks good on both mobile and desktop. Resolution is not the only problem, the very way the user interacts with you site changes on a mobile device. That said, the typical thing to do is to have a mobile style sheet which is loaded for mobile, and a desktop sheet for desktop. You might even go so far as to limit some of your content on mobile to make the page lighter.
I found http://mobiforge.com to be a good source of info.
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.