On my webpage, I have four columns and I'm normal computers the advertising looks good but when I go on my iPhone and makes certain columns bigger and squeezes the others in. Does anybody know how to keep the columns the same size on mobile devices. The page is mainly HTML.
turn of your scale. You can use this in your html:
<meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no">
here is more info about this:
http://developer.apple.com
update:
yes there is different way to change design depends of the design.
for example 1 way to do is:
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iPhone.css">
so this css is going to take just your mobile, so do different design stylesheet for this .
same thing is :
#media handheld, only screen and (max-device-width: 480px) {
/* overrides or style additions for iPhone */
}
in case you do not want to create a new stylesheet.css , let say you want to change 1,2 classes.
but the idea re the same.
There is the JS ways and anthers depends what is you project app do and build on
google knows all these stuff.
here is a post what can be useful for you :
http://stackoverflow.com/questions/3839809/detect-iphone-ipad-purely-by-css
Related
I would like to find a way to detect device type of visitors in order to load only the relevant stylesheet. ( Either desktop or mobile css )
Indeed, the CSS is render blocking, so, I would like to avoid 2 .CSS to be loaded every time ( style.css AND mobile.css )
Maybe there is another way to do it?
Regards,
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
Above will apply css only for device with screen with between 701px and 900px.
You can use media queries and set breakpoints. Refer below link for more information.
https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints/
https://css-tricks.com/resolution-specific-stylesheets/
I am currently working on a new responsive website with several breakpoints. Between those breakpoints the layout should be flexible to always display as nice as possible on every device.
If a user views the page with a classic desktop browser i want to force the desktop version of the page and prevent the responsiveness.
Reason why is the lack of responsive ads which currently exist in germany.
Anyone has a clue for me how to achieve it?
You should use max-device-width rather than max-width, which targets the viewport size rather than the device screen size.
#media only screen and (min-device-width : 1024px) {
/* Styles */
}
You can also target retina displays:
#media only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Edit: See this SO thread for more info.
Start by having two stylesheets. One responsive and one non-responsive. If it's a desktop user then load the non responsive and vise versa for mobile users
<link rel="stylesheet" media="only screen and (max-width: 400px)" href="mobile.css" />
<link rel="stylesheet" media="only screen and (min-width: 401px)" href="desktop.css" />
I was thinking the link target on the stylesheet would make my css file only load when it loads on a tablet or iphone. But the elements I'm trying to hide are still there. Im currently using (media="handheld")
<link rel="stylesheet" type="text/css" hrf="css/media.css" media="handheld" />
There are too many mobile device models out there to write stylesheets for; you'd be better off adjusting your CSS based on Screen Size.
This is especially helpful for targeting Android Tablets which comes in different sizes.
See this useful tutorial for further explanation:
http://css-tricks.com/resolution-specific-stylesheets/
So, instead of targeting a specific screen dimensions (which would keep changing as more devices are released), you'd want stylesheets that change according to the screen size.
Then you'll add several stylesheets:
<link rel="stylesheet" media="screen and (min-width: 480px) and (max-width: 700px)" href="css/small.css" />
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
etc.
So iPhones would use the small.css, and tablets larger than 700px will use medium.css.
Handheld is more for devices like PDAs or feature phones than iOS or Android devices. You're much better off using media queries to detect device capabilities and then adjust accordingly. Here's an example article: http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
I have a website already made. I want to make a mobile version of this. I basically want to import a table from the main site into the mobile site. I want to take the CSS code from the main site that covers the table and then input in my CSS file for the mobile site (I already put the HTML code into the mobile site). The problem is, when I do that it starts to overwrite the current CSS file and change the design.
Help please!!
You will need to use media queries. This is a css3 function.
In the top of your html, you need to put the following:
<meta name="viewport" content="width=device-width" />
Then, in your css, you will do something like this:
#media only screen and (max-width : 320px) {
/* Styles */
}
This is a reference site for commonly used media queries.
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
You will basically need to do this for each size device you are optimizing for.
Also, if you have several of these, you might end up with a very large css file.
That could impede download speed especially on a phone. In that case, create
separate smaller css files and use conditional statements in your html to specify
which css to call. In that case, you will need to use something like this in your html:
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="/assets/css/small-device.css" />
I read the article about them over at css3.info, but I didn't feel like it explained it well enough. I also could not get their examples to change with my screen size. I attempted in Safari, FF, Chrome.
Is this a feature that is not ready for implimentation yet?
If I want to adjust some styles when the browser window is less than 1024px wide. How can I do that?
The rule applied to the screen size means that, citing W3C spec "is usable on screen and handheld devices if the width of the viewport is" in the specified constraints.
http://www.w3.org/TR/css3-mediaqueries/
If you want to adjust the style when the viewport is less than 1024px you can use this rule:
#media screen and (max-width: 1024px) { … }
anyway this rule applies only to the viewport actual size. If you resize the viewport without reloading the page the styles won't be applied.
To apply a style sheet to a document when displayed on a screen greater than 800 pixels wide:
<link rel="stylesheet" media="screen and (min-device-width: 800px)" >
To apply a style sheet to a document when displayed on any device less than 400 pixels wide:
<link rel="stylesheet" media="all and (max-device-width: 400px)" >
inside
#media all and (max-width:800px) {
body { color: red; }
}
for iphone
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
::combining media query
To see how different media queries react on resize or orientation change, try the demo on this page:
http://www.jensbits.com/2011/04/20/media-query-playground-rotate-resize-rinse-repeat/
You can adjust the media query attributes to get a feel for how they affect a page.
Here are a few projects that solve this issue and are at the forefront of dynamic css and screen sizes:
320 and up:
‘320 and Up’ prevents mobile devices
from downloading desktop assets by
using a tiny screen’s stylesheet as
its starting point.
Lessframework:
Less Framework is a CSS grid system
for designing adaptive websites. It
contains 4 layouts and 3 sets of
typography presets, all based on a
single grid.