A Wordpress website (using the Genesis framework) I've designed to be responsive displays properly on an iPhone and a HTC but doesn't on Samsung Galaxy phones. (tested on Samsung Galaxy S2 and a Samsung Ace) I'm currently using the FitVids plugin to make the video embeds responsive.
Strangely, pages with no video embeds viewed on a Samsung phone displays properly, but on a page with video embeds, the page layout displayed is that for an tablet screen and not for a phone screen.
I've tried various other plugins but none of them seem to solve this problem.
It would be great if someone could offer any advice on this.
Here's My site
Here's the css stylesheet
As i have found that samsung screen is 480*800px
Please try with below CSS:
#media only screen
and (min-device-width : 480px)
and (max-device-width : 800px)
and (orientation : landscape) {
}
#media only screen
and (min-device-width : 480px)
and (max-device-width : 800px)
and (orientation : portrait) {
}
Thanks
try using this
<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport">
It is not recommended that you use #media rules, since the pixel size on a mobile device vs desktop may vary.
For instance, instead of:
#media only screen
and (min-device-width : 480px)
and (max-device-width : 800px)
and (orientation : landscape) {
}
#media only screen
and (min-device-width : 480px)
and (max-device-width : 800px)
and (orientation : portrait) {
}
Add a container that will have a margin-left of 5% and margin-right of 5%:
<body>
<div class="container">
# Your body goes here
</div>
</body>
I have found this a much more user friendly and maintained approach to responsive design than the standard #media rule.
Related
I am working on a side project and using Bourbon Neat as my grid. I have a few media queries targeting specific mobile devices such as iPhone 5, iPhone 6, and iPhone 6 Plus. My question is am I able to target a specific device, without carrying the styles over to another device? For example, I have a media queries set up for iPhone 6 and iPhone 6+. Here is what my media queries look like...
/* iPhone 6+ in portrait & landscape */
#media only screen and (min-device-width : 414px) and (max-device-width : 736px) {
/* STYLES GO HERE */
}
/* iPhone 6+ in landscape */
#media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : landscape) {
/* STYLES GO HERE */
}
/* iPhone 6+ in portrait */
#media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : portrait) {
/* STYLES GO HERE */
}
/* iPhone 6 in portrait & landscape */
#media only screen and (min-device-width : 375px) and (max-device-width : 667px) {
/* STYLES GO HERE */
}
/* iPhone 6 in landscape */
#media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : landscape) {
/* STYLES GO HERE */
}
/* iPhone 6 in portrait */
#media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait) {
/* STYLES GO HERE */
}
What I am ruining into is some changes I make in the iPhone 6 landscape media query seem to get applied to iPhone 6 Plus landscape, the iPhone 6 media query changes will override my iPhone 6 Plus changes. Again, am I able to only target a specific device without those changes being applied to other devices with similar pixel width? Any and all help or feedback is much appreciated. Thank you.
Again, am I able to only target a specific device without those
changes being applied to other devices with similar pixel width?
To answer your specific question, you cannot target by device via CSS other than by using widths, heights, etc.. but that's not really targeting the browser. So the answer is no. This requires knowing more than just what the width, height, or orientation of the browser is. And even if you could, I'm not sure you'd want to as it's not a very clean solution IMO.
If you absolutely must target by device you'll need to use server or browser side code. Here are some non-CSS solutions if you'd like to look into them:
1) You can use javascript:
http://hgoebl.github.io/mobile-detect.js/
2) Or you can use a server side library like:
http://mobiledetect.net/
But a better solution would be to structure the CSS to make sure that the styles are not overriding each other.
You can find out the device resolutions you are trying trying to target and be more specific in your media queries. For example, to target an ipad in portrait mode:
#media all and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait)" {
/* styles */
}
Or for an ipad in landscape mode:
#media all and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
/* styles */
}
However, with this technique there is no guarantee you won't end up apply the styles to another device with the same resolution. The safest way to target a device is using javascript and some OS/device sniffing.
i'm using an emulator currently at http://mobiletest.me/ but my site is all over the place. The media code i'm using is this:
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait)
but it isn't seeming to use this media query and is using my other query for ipad with is #media (max-width:768px)
I am using this meta in my html:
<meta name="viewport" content="width=device-width, initial-scale=1">
I have the media queries in descending order 1600px 1280px 768px etc.
try to use :
#media only screen and (min-width:320px) and (max-width: 568px){}
device-width refers to the actual width of the device someone's using, not the viewport width.
In your example:
#media only screen and (min-device-width : 320px) and (max-device-width : 568px)
Could target iPhone 4's 'portrait' view (640px).
This is important because the iPhone 4 (and many other mobile devices for that matter) for example crams in 2 pixels per 'CSS' pixel. This means the device-width of the iPhone 4 is 320px / 480px, whereas the viewport width is actually 640px / 960px.
How to target media queries for Samsung tab 8.4 inch.
my code is
#media (device-width: 800px) and (device-height: 1280px)
when first appearance media query is getting affected. once changed the orientation from Portrait to Landscape and again back to Portrait, style is not getting affected.
Device Specification :
http://www.gsmarena.com/samsung_galaxy_tab_s_8_4-6439.php
Thanks in advance
I can't test my solution on physical device, but you can play with orientation:
Landscape mode
#media only screen and (max-device-width : 1280px) and (orientation : landscape) {
/* Styles for landscape*/
}
Portrait mode
#media only screen and (max-device-width : 800x) and (orientation : portrait) {
/* Styles for portrait*/
}
Notice, that different browsers (chrome, android native browser, firefox etc.) handle media queries in different way. For example if you use:
#media only screen and (max-width : 480px)
it would work on Desktop Chrome browser and on android smartphone browser, but not on Safari on iPhone. To make it work on Safari you have to use:
#media only screen and (max-device-width : 480px)
The conclusion is that you need test your media queries on physical devices :)
For more information, check this page: http://www.w3.org/TR/css3-mediaqueries/
here i done code for style.css for mobile device it the code works for mobile portrait size and when i rotate to landscape it call default css how to solve this issue
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
}
another terms are
#media (min-width: 481px) {}
this for all sizes like tablet,pc ..
for this i checked in web developer tool in google crome
The problem is when you rotate the device, it is screen is bigger than 480 px
#media screen and (orientation:portrait) {
...Some Css Code
}
#media screen and (orientation:landscape) {
...Some Css Code
}
This will help you
or
you can find the landscape resolution than you can target media query with that.
For Iphone 5 your media query must be like that
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) { /* STYLES GO HERE */}
I have been using some media queries for the i Pad and they were working fine until two,three day ago. But they just stop working. My i Pad is not recognizing the media queries while they are still working in Firefox native responsive design test view and other online websites to check the responsive designs.
My initiative queries are with view port in header
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2"/>
#media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) { //for landscape
#media screen and (min-width: 755px) and (max-width: 1024px) and (orientation : Portrait) //for portrait.
Then tried these ones too
#media screen and (min-device-width: 768px) and (orientation:portrait){
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
#media screen and (min-device-width: 1024px) and (orientation:landscape){
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) and (min-width : 768px) and (max-width : 1024px)
and (orientation : landscape) {
//Also in addition i tried the other view port meta tag too
like
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, maximum-scale=2"/>
But no luck
I don't know where I am doing mistake but this kind a important. Please help any kind of help will be appreciated
Try the meta content:
<meta content="True" name="HandheldFriendly">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<meta name="viewport" content="width=device-width">
I don't know why this was ever working. I believe the issue is because you are using screen, this media type is reserved for regular computer screens.
Here is a list of the media types:
all: All media devices
aural: Speech/Sound Synthesizers
braille: Braille tactile feedback devices
embossed: Page Braille Printers
handheld: Small/Handheld Devices (like Smart Phones) [NOTE: Android, iOS, & other smart phone browsers ignore this rule.]
print: Printers
projection: Projected Presentations (like slides)
screen: Regular Computer Screens
tty: Media that uses a fixed-pitch character grid (like teletypes &
terminals)
tv: Television-type Devices
Warmth,
Crystal Miller