I'm trying to get my responsive website to "respond" when on iphone or ipad for example... my css file is linked here - http://uximag.com/styles.css
All the responsive style is at the bottom of the stylesheet. it works fine while on a desktop but when I go to an iPhone it doesn't work?
Please let me know, I've tried a few methods and cant seem to figure it out.
JimmyRare's comment is a good one. Set your max width to be smaller (640px for iPhone5) and it should apply to your iDevices and your browser when it's shrunk down.
Another option is setting up the code in your HTML document, which isn't ideal in that it combines your HTML writeup with your styling, but it has the added benefit of letting you target the width of the screen's resolution and not the browser width:
<link rel="stylesheet" media="screen and (min-device-width: 640px)" href="640.css" />
Related
When having a look at this site
this:
linebreaks correctly for small screens. It word wraps (adds a line break) for iphone 5c and ipad in landscape mode as well. Which is wrong. The sentence could finish in one line.
The font size seems bigger as well.
The word wrap / linebreak does not happen on my HTC One S in landscape mode.
Is there a tool that can help me figure out these irregularities?
Any idea what this problem is about?
Note: this gets used:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
EDIT I applied a fix on the website, so now I heard it looks fine. The answers given fix the problem (when applying 100% instead of none)
Apple devices (I might think also Chrome on Android devices do this as well) have a really funny way to render text on pages, the font increases in size automatically to retain the same "flow" in both portrait and landscape since it helps the user to do not lose track of the line it's currently reading.
The way to disable entirely the resizing is to use the following CSS rule:
html {
-webkit-text-size-adjust: none;
}
However this behaviour works only on mobile pages which are zoom fixed with the meta tag user-scalable=no and it breaks some desktop browsers while the desktop zooming
What you probably want is to keep the font-size constant through every zoom scale. If you add the following on your CSS, then you'll have what you're looking for.
html {
-webkit-text-size-adjust: 100%;
}
‑webkit‑text‑size‑adjust: 100%
Is the way to do it instead of
‑webkit‑text‑size‑adjust: none
Using none will break user zooming in various browsers.
Here's a good read about the topic: http://blog.55minutes.com/2012/04/iphone-text-resizing/
To build responsive and cross-device websites you can use online tools such as this emulator
However, in text case formatting and layout, a real emulator is needed.
X code can launch IOS sumulator and will give you a way to debug your local/remote website on any apple devices (smartphone and tablets).
By using this software, you will be able to understand/debug and correct your website.
Currently, all browser are more or less managing differently the rotating actions (lanscape<->portrait) and also fonts. So, I won't look exactly the same but your website will be very similar across all browsers.
In your case, first you need to stop all browsers to resize your text on rotation.
Simply add the following CSS code.
CSS
html, p, a {
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
}
By the way, I checked your line break issue. Every thing is working on Iphone 4/5 on Ios 6X and Ios 7X.
But any way, you need in the future to check your website on IOS simulator
Here is a screenshot from safari for an Iphone 5:
I have a CSS layout for a web-based game that was designed to fit the iPad screen only (it's running inside an iPad app). Now I want to port that same game to the iPhone. If I simply run the app using the iPhone 5 simulator, it will just show me a 320x568 section of the screen.
I was wondering if there was a way to (automatically?) shrink down every component on the page to be smaller and fit the iPhone 5's screen. There's lots of images that were designed with the iPad's resolution in mind, so they're bigger than they should be on the iPhone. Can these be resized by the CSS depending on the screen size or would I need to resize them all manually?
In the index.html file I already have included:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
It won't size automatically to the iPhone's screen however. There's also a lot of hardcoded pixel values. Can I simply change those to a percentage that's relative to the screen?
For the record, I didn't write this code, and am not THAT good at CSS. Thank you for your help.
You can checkout this website for help... You can study how to fit a layout as per device size.
http://alistapart.com/article/responsive-web-design
Don't blame if the link expires;-)
I have a painful issue CSS issue which appears to be caused by the Disqus CSS.
The Disqus CSS seems to cause my page's main content text to randomly change sizes in parts. Clicking refresh will randomly make some text bigger, some smaller and some bold. It only seems to occur in Safari on the iPhone (real and simulator) and is fine in Firefox, IE, Android and iPad Safari. Turning off Disqus comments fixes the issue. I have tried changing Disqus themes and turning mobile view on and off.
Below you can see the same page being rendered differently every time I click refresh (live site-it should look like this)
Any help would be greatly appreciated.
You could try applying the -webkit-text-size-adjust: none; and targeting the Disqus code? If I remember Disqus doesn't use iframes, so it should work if the hierarchy you use is stronger than theirs.
More info here:
http://css-infos.net/property/-webkit-text-size-adjust
Hope that helps :)
Edit: I just had a thought while writing that comment below. You may be able to sort this by setting the viewport width, either explicitly or to device width.
For example, this will make the viewport on an iphone be 320px wide in portrait and 460px wide in landscape (I think that's right?).
<meta name="viewport" content="width=device-width, initial-scale=1">
From the screenshots I think that is actually too small though, so something like this may be better.
<meta name="viewport" content="width=800, initial-scale=1">
This is actually why the text size changes in the first place. The iPhone scales that 800px to fit both portrait and landscape. In portrait though that could make the font far too small so it is increased.
See here for more info: https://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
In a page I'm making, I'm writing a secondary stylesheet for mobile devices that overwrites selected parts of the first stylesheet.
I'm using media queries in the following way:
<link rel="stylesheet" href="assets/ui.css">
<link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="assets/ui_mobile.css" type="text/css">
This works for iPhone. My goal is to create a query that will activate if it's an iPhone or Android, and then let the iPad use the standard desktop styling.
When I switch it to max-device-width: 800px, it triggers on the iPhone and Android, but also triggers on iPad. It should not be doing this, as the max-device-width of the iPad is allegedly 780px. But it is, for whatever reason.
I've used many permutations of various widths, heights, and aspect ratios, but to no avail. Does anyone know a workable way of differentiating between these three?
Any suggestions are appreciated. Thanks!
When I switch it to max-device-width: 800px, it triggers on the iPhone and Android, but also triggers on iPad. It should not be doing this, as the max-device-width of the iPad is allegedly 780px. But it is, for whatever reason.
I think you're misunderstanding how max-device-width works. Since the max-device-width of an iPad is 780px, it falls below the 800px limit just as validly as the iPhone does.
Try using physical measurements rather than pixels - what you are trying to do is restrict to small screens, independent of resolution. Try
max-device-width:12cm
Which will only match physically small screens, like a phone (no matter how high resolution), but not larger ones like tablets, regardless how the resolutions change in the future.
I am creating an application in HTML and javascript for iPhone and iPad.
I would like to have a splash screen for both devices since they must have different dimensions.
I know that there is a link tag "apple-touch-startup-image" that allows you to specify the link for the splash screen image.
What do I do if I want to specify 2 different links? I put 2 link tags with rel="apple-touch-startup-image" and 2 different URL?
Will the mobile device take the correct one if I respect the naming convention here?
What are the sizes used for the iOS application splash screen?
Thanks!
Just figured out how to do this, and it's similar to the apple-touch-icon setup.
Here's my example:
<link rel="apple-touch-startup-image" href="iPhonePortrait.png" />
<link rel="apple-touch-startup-image" sizes="768x1004" href="iPadPortait.png" />
Just set the "sizes" attribute to the specific width and height and mobile Safari should match it up correctly. You can see the various width/height values from the link you posted, too. Hope it works!
I don't believe this is possible on web apps. The naming convention in that question will not work, it is for native apps.