I'm embarking on my first foray into mobile site design - I've set up a method to redirect mobile users to a separate URL, but now I need to design the mobile version of the site (targeting smart phones like Android / iPhone). What dimensions should I create this to? Is there a way to force mobile browsers to scale the content down? (Currently my site just appears very big within the mobile window and you must scroll horizontally and vertically to see it all).
320 X 480 pixels is standard for mobile sites.
Things you ABSOLUTELY MUST KNOW about footers for mobile.
iPhone has the bastard of all browsers and no emulator emultates it correctly for - specifically:
CSS footer style - position:fixed; bottom:0;
Don't even try it.
iPhone only recognizes position:relative;
iPhones do not recoginized the position style of fixed - in case you want a footer to stay on teh bottom.
Related
I have a site which has a tiny sidebar with the social icons on the right side of the page.
On the desktop version these social icons are placed on the right side in Chrome as should be: live version http:// ont.999games.nl/ the-unusual-suspects.html
chrome desktop version
On the mobile browser these social icons are not visible unless you slide the page to the left:
chrome mobile browser
I have tried a range of css and metatag tricks but none have resulted in a page exactly as wide as the browser with the social icons visible on the right side.
set my container DIVs to position:relative, then set content DIVs to position:fixed. Tried adding metatag viewport, and versions thereof. All didn't work.
Is there a magician who does know why this is happening and more importantly how to fix it?
I can't replicate the issue in either chrome desktop reduced to mobile width, or on mobile. It's looking ok to me on both.
I'm building a website using WordPress. Although the pages are well suited for Mobile site, this particular page is displayed very congested. This is the page from the website website - http://www.cyberfosters.com/anspress/
If you click F12 using Chrome browser on this page and toggle the "Device Mode" you'll see how it appears on a mobile device, I'm going through the CSS files to find out what needs to be changed but I can't seem to find out.
What I want is that the page should appear on a mobile as it does on the website but just scaled down.
I was looking at your html and css and the problem seems to be very simple, your site is not build to small deviced because it uses a mix of width values in PX and %, the design must be set in % to work well on multiple devices without using special pages for mobiles and other for pc this is my recomendation.
Example if you put a 1090px image on a 800px screen resolution it will just not work so what we do is to set image width value to 100% in this case and so on that way the images get auto resized the easy way. Do the same with tables images divs spans etc
I'm designing a responsive site (See the site here) and in the small-screen version, I'm absolutely positioning a banner (unfortunately I have no other way to manipulate the location).
On iOS7 and all modern browsers, the banner pops in to place nicely using a top: 31%
However, in iOS6, the banner appears half-way down the page (at the exact same pixel density and screen size - see this screenshot)
I can't figure out the differences between the page rendering of the two browsers.
The specific style that I'm looking at is #outerWrap h1 .
Any help would be appreciated!
I have the following jsfiddle http://jsfiddle.net/KfPOQ/
using a web browser it is fine however when on the ebay app on iphone or ipad i have to scroll right to see the full page how do I eliminate this issue?
You need to have the content of the page fit within your viewport (or screen) dimensions for the given media type. You can have different stylesheets based on the media type in a link/stylesheet tag. Say, for the iphone, use media="handheld" and try to keep the content within around 600px, or whatever looks good on your mobile device.
Here is another resource from w3c.
I have a very simple website that creates a horizontal scrollbar in the following:
Android:
Chrome
Firefox
Opera Mini
Not in Android Default browser but the site looks broken
iOS:
Safari
It's really no big deal but I'm comparing my website to the full desktop site of http://google.com and Google's website doesn't get the same problem as mine.
I am still pretty new at CSS and HTML and I feel like I'm breaking some really simple rule I don't know about that is creating this problem. Any ideas on how to fix this?
If you would like to test it. Go to http://natio.in
The horizontal scroll bar is appearing because you have fixed width's set on elements, that when the site is viewed on a mobile browser, the width of those elements is set wider than that of the viewport width. If you use a percent for widths, your webpage will be able to adjust accordingly.
well, you can include overflow-x: hidden; in the styles for your body tag, but if there is content outside the width of the phone, you wont be able to get to it. Or you could crate a responsive layout with media queries.