I have 2 questions;
For fixing iPad Safari issues, do we only need to update in the CSS...I mean can there be any kind of issue which might require a JS update as well to fix for iPad.
Also through JS, is user-agent check the only option OR is #media which is used in CSS can be used in JS as well, as an if..else condition?
Depends what you're trying to do, but Mobile Safari has a very good rendering engine I don't see where you would need to tweak CSS with JS to make it work.
Yes you can target just the iPad with the following syntax:
"
#media only screen and (device-width: 768px) {
/* For general iPad layouts */
}
More here
Related
pretty much i have made a website that looks great on desktop, but looks absolutely awful on mobile, so im going to write a version that is the same level of quality as the desktop version.
however i have no idea how to do this, i have looked it up and i have found one thing telling me to use the following code;
<script>
if ("ontouchstart" in document.documentElement)
{
// content for touch-screen (mobile) devices
}
else
{
// everything else (desktop)
}
</script>
i want to put html in where the comments are, but I dont know how too.
Any help?
You're going to want to write media queries in your css file. You might have to get creative with some of the styles that are currently on your site but this is generally how you would go about changing the look of a page for mobile devices.
#media (max-width: 767px) {
css styles that need to be altered for mobile go here!
}
You can also use min-width in the media query to apply stiles to large screens only.
#media (min-width: 767px) {
css styles that need to be altered for destop go here!
}
And also there are ranges.
#media (min-width: 360px) and (max-width: 767px) {
css styles for screens within this range go here!
}
You have to come up with a design for the mobile, not just trying to make it fit on the screen. You can achieve the responsiveness using CSS screen media queries. Media queries basically takes the browser current resolution (be it desktop or any devices) and it will automatically adjust the changes you made (like layout changes) based on what you assigned to the media queries. And you can also look up for CSS frameworks like bootstrap and tailwind, they have an amazing responsive/fluid component built in.
I want my website to recognize when it is loaded in safari and to follow a given css that works for safari. For example, a css rule may work in any other browser but not safari; so when loaded in safari the site recognizes it and skips to the applicable css that will work with it.
Much like mobile css via the use of #media rules, written as #media only screen and (min-device-width: 300px) and (max-device-width: 979px) { css rules; }where if a screen's width is within a certain range then the following 'css rules;' apply. However, how would one right this up for browser specific. For example, maybe #safari only browser {.body {width:100vw;background:#ffffff;} img {width:90%; left-margin:auto; right-margin:auto;}}. Does anyone know of a clean way to do this? Will #safari only browser { work?
I have very strange problem.
I am developing mobile version to my website and i have very strange problem.
When i open my page with mobile that is having screen height over 770px everything is working well. So when i open it with 771px it's works.
But if i change the screen height to 770px the javascripts is not working any more.
First of all i found all #media only screen and (min-width: 771px) { rules in my CSS files and replaced them to #media only screen and (min-width: 350px) { but even with that change it is not working.
I've searched for any occurence of 770 or 771 in all my CSS files and style rules and there is none like that, but still the javascript is not working.
Here is my complete javascript: http://pastebin.com/HJyDrVYd
Here is my complete css: http://pastebin.com/M3Cu5qfF
Here is my HTML output of the page on which i have this problem: http://pastebin.com/CBgedJmZ
I run out of suggestions from where the problem may come and why the mobile version have working js with screen height 771px or higher but not lower.
Can you give any suggestion and help ?
Thanks in advance!
I have three sets of images. One set that i want to use for iPhone 4,5 & iPad and I have two sets of images for Android phones, one high res and one low. Not sure how to accomplish this.
I'm struggling to figure out the best way to do this. Can i somehow use one media query for iphone and ipad, since i want to use the same images? Or do I have to check for iPhone 4 and 5 like this
#media only screen and (min-device-width : 320px) and
(max-device-width : 568px) and (orientation : landscape){
// iPhone 5, load images.
}
#media only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
// iPhone 4, load the same images.
}
Can I somehow check if its a android device or apple device? If thats the case, maybe I could have two seperate CSS-files and just load the correct one, and inside the correct CSS-file, i'll load the right images. My project consists of only JavaScript.
MediaQueries are powerful, but can only go so far.
The best way that I've found to target specific User Agents is CssUserAgent.js
It works like Modernizr, but instead of adding classes for browser functionality, it adds very detailed user-agent classes to the html tag.
I have a website with some content. Based on the users screen resolution i want to show different content so that mobile devices will have some other content, but the rest of the site will be the same. I did some research, and it seems like the only possible way is with javascript. I code PHP most of the time, so i really suck at javascript, so it would be nice if someone could provide me with a simple script.
What i need is a javascript function like this:
if (screen resolution < X x X) {
show some content...
} else {
show some other content ...
}
If javascript is off, it should just show some other content.. :) I can install jquery if it helps. Thanks
It would be nice with examples for the html code too.
you should NOT detect if the user is on a mobile device with javascript. i recommend you this in PHP. you can use [$_SERVER'HTTP_USER_AGENT'] and then simply parse out the string to see what kind of user agent it is. I am actually implementing this same concept right now.
you can also use this class Mobile Detect
include("Mobile_Detect.php");
$detect = new Mobile_Detect();
if ($detect->isMobile()) {
// any mobile platform
}
Check out CSS at-rules. They allow you to specify maximum and mimimum widths for a "namespace" of CSS rules, inside which you can have different rules for smaller screens. But be careful when using those, since IE doesn't like to support good things.
#media screen, projection and (max-device-width: 800px) {}
#media screen and (max-device-width: 300px) {}
On a project I'm working on, we actually redirect to a mobile version of the page if the user-agent contains certain keywords(check out the HTTP headers from JS), and use a different stylesheet completely.
You can use css media queries to target different screen resolutions. eg:
#media only screen and (max-device-width: 1024px) and (orientation: landscape) {
/* iPad in landscape orientation css */
}
#media only screen and (max-device-width: 480px{
/* iPhone css */
}
More info:
https://mislav.net/2010/04/targeted-css/
https://webdesignerwall.com/tutorials/css3-media-queries
you should try CSS media queries instead
In don't know from PHP but in .Net you can kinda detect that they are a mobile visitor and then you can redirect them to a mobile section of the site.
Then all you really need to do is write the small site re-using your existing web controls etc. Again, unsure if you have that concept in PHP but I imagine you would.