Does anybody know of a method for redirecting mobile users to a mobile site using pure HTML.
My clients website is located on a external multi-site system. We can only access the CMS and no scripts are allowed.
Hope someone can help, or at least give me some hints on what to do.
Cheers!
No it's not possible to redirect mobile user, becouse you cant check if a user is mobile with html. You can make with CSS your layout responsive you make css
here an example:
#media only screen and (max-width: 1000px) {
#website{
display:none;
}
#mobile{
display:block;
}
}
Related
this code show pc version web page
so i want to load mobile version page
that page don't have additional mobile web page
it is Reactive web
please give me a good answer.
If you detect mobile device by user-agent, you have to pass to iframe some parameter <iframe src='site.com?loadMobile=true'> and check it on server side.
If you have responsive web, then you have to fix your css code.
#media all and (max-width: 699px) {
/* your css code for this devide width */
}
http://stackoverflow.com does this, as well as www.ancestry.com. How do these sites keep from showing the mobile layout on a desktop when resizing the browser window if they don't have a separate subdomain? With my understanding, media queries will resize the website according to the viewport, but the both StackOverflow and Ancestry only resize to a certain point - on a phone the layout is completely different. Any help with this? I'd like to know how sites like the examples given achieve this.
Technically it's done by forcing a min-width on your document, which will incur horizontal scrolling below that size, with:
html {
min-width: 1000px;
}
But you should only deliver such CSS if you a have a 100% guarantee that this site will be served only to desktops. That can't be applied to mobile devices. Showing the mobile layout on desktop if a user resizes the window is perfectly normal. It naturally adapts to split screen mode situations.
I should probably make this a comment but they look at the device width, not the viewport width in their media queries and javascript. (I'm sick and don't feel like writing any more). There are also services available that can help you detect what type of device there is. However, these services can be slow and pricy sometimes. More often not worth the effort.
You can detect if your viewer is a mobile or a PC, then load different CCS files.
One way you can detect if there is a mobile is by javascript UserAgent BUT it is not very effective.
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// is mobile..
}
I haven't tested this recently, but there is a 'mobile' device specifier:
#media mobile and (min-width: 400px) {
.col { width:50% }
}
#media mobile and (max-width: 400px) {
.col { width:100% }
}
That'll work on mobile devices, but not desktop
I deployed the same scenario on a WordPress site using "mobble pluging" which simply detect the device then generate a HTML version for mobile, tablet or desktop.
Can someone shed some light onto the area of content management for a website that has a mobile version as well as a main version.
How do you manage these? Do you create 2 versions of the site or do you use conditional selection if the site is mobile, then show XYZ?
Lloyds has the following, mobile and main websites:
As you can see not all of the assets are included on the mobile versiuon.
mobile:
Main website:
Content should be separated from layout/design. That is the main goal of a CMS.
This means that the CMS will be the same for both versions, since the content will be the same. In order to provide a different mobile version you should look into using a responsive WordPress template, or design one yourself.
Alternatively there are WordPress plugins that will serve a completely different template if the user is browsing from a mobile browser. (Check out this plugin for example)
If you use any CMS (Joomla, Wordpress and others) all have a good supports for every devices from big monitor to mobile devices. So you no need to worry about the layout and only have to work on content part. Using `#media queries' we can target any devices and monitors; and layout will be change accordingly. For example check the below CSS Code; Background color will change accordingly devices.
#media (max-width: 400px) { /*for Mobile*/
html { background: red; }
}
#media (min-width: 401px) and (max-width: 800px) { /*For Tablets*/
html { background: green; }
}
#media (min-width: 801px) { /*For Desktop Monitors*/
html { background: blue; }
}
As you mentioned about the website; the main purpose is to achieve the main goal. And there goal is to provide their users to get access their account at anytime. And its solve their goals. and they are just showing only thing which have more impact to user goals.
You need a CMS that can function as a mobile CMS so that you can control your content on your website and on mobile. ButterCMS is a headless CMS that can achieve this and here is a blog post about how you can create your own mobile CMS solution using ButterCMS and Flutter by Google.
I have a question regarding displaying different content on different web browsing device. I know with CSS i can display different style sheet according to browser width size. But the challenge I have now is Flash content, I am setting up a Flash content for my company website and as we all know flash isn't supported in mobile device. To resolve this I thought about making a simple HTML version of the website for mobile devices. However, what can I use to determine when to load the flash or when to load the html? For example if I were to visit the site through my desktop the FLASH website will load and if i were to use my phone to visit the site, the HTML website will load. I am pretty new into web designing so any kind of help will be greatly appreciated. Thanks alot in advance
theoretically you could do this with media queries:
#media only screen and (max-width: 480px){
.flash{
display: none;
}
.html-content{
//css styles for html mobile site
}
}
#media only screen and (min-width: 481px){
.flash{
//styles for flash container
}
.html-content{
display: none;
}
}
But Josh C is right, you should avoid Flash these days and use CSS3 or JS
I'm looking to create a mobile version of our website. What's a good way to provide the best, most fully featured version.
We have HTML5 and CSS3 Website. Is any Converting is possible?
Thanks in advance...
There are several things to consider when converting your site, what size screens and devices are you going to support - just phones or pads too? Also what is the content / functionality of your site. If it's fairly static display sort of data then you may consider "Responsive Design" (lots of links if you google it). You modify your layout to handle the screen sizes. You could use Modernizr or something like that to determine what functionality the device has and determine how to skin / handle navigation, form data, etc. I don't think you'll find anything to just "port" your site (other than paying somebody else to do it)
I'm assuming you plan on having similar content on your mobile version of your website that you do on desktop version, if so you could use media queries to configure the styling of your site to best fit various mobile screen sizes, such as:
/* Media Queries
------------------------------------------------------------------------------*/
#media handheld and (max-width:480px),
screen and (max-device-width: 480px),
screen and (mx-width: 600px) {
/* then modify css for the small screen such as centering headers, setting inherit widths etc */
}