Sometimes, when I load a page on the Internet on my phone or tablet, it does not look right. Is it possible to inject custom CSS into a page on these devices?
UPDATE:
I am the developer of the site, but it would be cool to change the site without login and to add it to the browser. So only I can see it and I do not have to login.
Browser plugin would not be sufficient. The idea is to add pieces of CSS inside a "webview" on the iphone/ipad for a specific page.
If I understand your question well, you want to create mobile-specific CSS to fix your website's viewing, is that right?
If so, you can use CSS's media queries for so, like this:
#media only screen
and (min-device-width : xxx px)
and (max-device-width : xxx px)
and (orientation : landscape or portrait)
and (min-resolution: xxx dpi){
// your css goes here
}
Here are some links that might help you:
http://help.campaignmonitor.com/topic.aspx?t=164
How to apply different CSS for mobile devices not just based on media width/height
http://css-tricks.com/snippets/css/retina-display-media-query/
Related
This is the same media query I've used for all my other WordPress sites but for some reason it's not working for this particular site.
Often I can get away with just using:
#media screen and (min-device-width: 768px) and (max-device-width: 1024px){}
But I've tried that, and I've tried:
#media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {}
But neither are registering. It's not a cache issue, either.
Additionally, for some reason when I inspect the site, everything lists as being received from site/style.css:1 even though my code is around line 604.
It was retrieving the css from all of the desktop styling, so as a test I added #media only screen and (min-width: 1025px) {} to my desktop styling, just to cancel it out, and sure enough, now my landscape header is all reverted back default styling (full sized image, default h1 styling, etcetera). Nothing I do triggers the landscape media query, even though the rest are called without any issues at all. I'm about to pull my hair out, and I can't find anything else on Google that quite fits as a solution.
The mobile and iPad Portrait media queries are working perfectly.
Any help is appreciated!
As I can't comment yet:
Do you use any sort of minifying? And are you sure that your .css file has no errors? With both these questions I'm referring to the style.css:1 thingy.
I'm developing a web app for feature phones in Africa (non- smartphones whose screen size is usually 128 x 160 px (1.80")).
I need to learn how to make the website responsive, or display properly for a screen size so small. I'm aware that regular CSS queries dont work well for feature phones, so any other suggestions?
This:
https://developers.google.com/webmasters/mobile-sites/mobile-seo/other-devices/feature-phones?hl=en
is something I read on the topic, but it's vague for me to understand what changes to make in my CSS file (which is using bootstrap at the moment) Will really appreciate your help!
To make a website responsive we have to use CSS3 #media queries. Write #media queries for different screen sizes. But #media queries doesn't support for older version browsers. In your case (non-smartphone) #media doesn't work. I suggest create a sub domain for mobile phones like http://m.website.com and use javascript to redirect to mobile version site if user opens http://website.com .
#media only screen
and (min-device-width: 128px)
and (max-device-width: 160px)
{
/* Put your CSS Code for small screen */
}
Some useful articals about #media .
http://code.tutsplus.com/tutorials/quick-tip-a-crash-course-in-css-media-queries--net-14531
http://www.htmlgoodies.com/html5/tutorials/an-introduction-to-css3-media-queries.html
https://css-tricks.com/logic-in-media-queries/
http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
You can either try things like foundation which you can use pre-made tables, and sections with pre-defined css properties:
http://www.foundation.zurb.com/
Or you can use percentages, width: 15%. So it will get the designated percentage of your device and calculate the correct size based on that.
Also what your listed site is saying(google), it creates different css files based on your device. So when you use <link> to set your CSS file you can make it so certain devices use certain files:
(Taken from Google):
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-1" />
As new phones have a really big resolution display (ex: 1280) I'm wondering what is the smartest way to do a CSS media query dedicated ONLY to Phones with 1280.
The issue I have is that if I do this :
#media only screen and (min-width:1136px) and (max-width:1280px)
I will include some desktop reslutions sizes and I want to have a different UI between desktop view and mobile view.
Is there any good practice/solution somewhere for this ?
Thanks a lot !
A great way to target devices like smartphones would be to use min-device-width and max-device-width, e.g.
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Smartphone queries here */
}
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* iPad queries here */
}
Alternatively, you could use Detect Mobile Browsers for mobile/tablet detection.
for the mobile devices just try to check min-device-width and/or max-device-width.
Another possibility is to check the pixel ratio of the device you're targeting
User agent sniffing.
This is not good practice, but if you sniff for useragents serverside and serve different content (html/css/js) to the client (phone, desktop) it works.
Better you should ask yourself what features your UI is designed for, like touch, screen size etc. To detect this you can use CSS media queries and http://modernizr.com/
I'm currently trying to make some CSS changes to the mobile edition of a website using the Wordpress theme Responsive by ThemeID. I've spoofed my user agent to a Samsung Android, but this site still displays as if it were a desktop. When viewing it on an actual mobile device, the theme changes.
I'm sure I've spoofed my UA correctly because Google, Youtube, Yahoo, MSN, Stack Overflow, etc. all respond to my browser being mobile. Does this theme not really have a mobile view or something?
The theme format is controlled by CSS media queries. No need to forge a UA, just resize your desktop window to a narrower width to invoke the mobile view.
Theme indeed uses Media Queries breakpoints and they will adjust and adapt the layout to any* viewing environment.
Responsive breakpoints are:
#media screen and (max-width: 980px) {}
#media screen and (max-width: 650px) {}
#media screen and (max-width: 480px) {}
#media screen and (max-width: 320px) {}
#media screen and (max-width: 240px) {}
Thanks,
Emil Uzelac
P.S. We have a dedicated support forum, just in case that further assistance is needed.
Can some one explain to me what the orientation media feature does in layman's terms?
It's mainly for mobile devices like a phone. You can control the style based on whether the device is being held upright, or sideways ...
#media all and (orientation:portrait)
{
/* Your CSS here */
}
#media all and (orientation:landscape)
{
/* Your CSS here */
}
Assuming you are asking about the media attribute in the link tag please find the answer below.
Media is to tell the browser or the device to pick the right stylesheet for that particular device or an action.
Eg. if a style sheet is linked with media as Print the stylesheet will work only when the page is been printed. This way you can minimise the graphic and media involved in the page for print purposes.
in simple terms it is a if conditions for stylesheet.
you have the following media types.
Screen - obviously computer browser screen.
ttv - teletype
tv- television
projection - projectors
handheld - small screen handheld devices
print - for printer
braille - Braille feedback devices
aural - Speech synths
all - picks the same stylesheets for all the above.
Hope this helps...