Ok, now most mordern smartphone has 720p or 1080p resolution. That mean even screen size is small like 4 in, we still can see all text, gui (such as email textbox) of the whole website when first time opening it in Galaxy s3.
However, though we can see the very little email textbox in mobile browser, it is too small for us to enter data. So we need to magnify the page and that is very time consuming.
So, here is what i am planning to do but i feel it very strange.
I will create a website like a normal website mydomain.com, but the button and text on that website is very big.
Ex:
Css
.myNormalMobileFont{
font-size: 500%;
}
.myNormalLargeFont{
font-size: 700%;
}
The below image shows that no matter where I open my website either in mobile device or in desktop, then it will look like this
One more thing, when I opened some article page in my mobile I saw they have a mobile web version, but I have never found these mobile version on the normal Desktop browser?
Where they put their mobile web?
My mobile website can be used as a normal Desktop website but the the buttons and Text will be very big.
Can someone explain this?
You actually don't need to specify the font-size like that as long as you set the correct meta tags.
ex:
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
This sets the scale of the viewport.
I suggest you upload your HTMLs to a server and access them from your phone and play around with it there. it's the best way to learn
As for your question regarding where you can find the mobile web, it depends on the site.
1) Sometimes the site is responsive (you can access the site from desktop , resize your browser down and watch it change) ie: https://www.foxtel.com.au/got/login.html
2) But sometimes they have dedicated mobile site, like facebook -> https://m.facebook.com/
Related
I'm a novice at HTML and CSS and I launched a simple responsive website with only one page, but then I managed to add a couple of pages more to it after a few days. Everything looks good on desktop and when I make it smaller to 350px width via developer tools, it actually looks good as it should and all responsive.
Link: https://transporte.capital/
However, when I enter it from my mobile phone it looks horrible as CSS becomes almost inexistent. The logo becomes a link with underlines, the tweet widget is still there (I disabled it via display: none; in media queries because it takes too long to load), the social media section is distorted, all images are huge, and so on.
Is there something wrong with my mobile phone? I tried to look for cache in Site Settings - Data Stored in Chrome, but there was nothing for my website there.
Now I tried the Opera browser and the website looks good as it should. What should I do to make it update on Chrome? And will it update as it should the next time I make changes to it? Thank you!
screenshot 1
screenshot 2
I could see the page properly in my Android mobile Chrome browser. Please clear cookies once and ensure the zoom in is not enabled. Attached is my screenshot. Screen size: 393x719px
I'm currently trying to use CSS media queries to optimise my website for mobile view, and am using Google Chrome with an extension to resize the viewport on my desktop to adjust my content for mobile.
The problem I'm having is when i'm designing and changing on my laptop at the mobile phone resolution, everything works fine (see first picture) but when I actually load the website on my mobile, I'm not getting the same view as what I'm getting from the laptop (see second picture).
I've used
<meta name="viewport" content="width=device-width, initial-scale=1">
to set my width for mobile
I know the font is different because it's a third party i've installed onto my laptop so thats not the problem.
Just wondering if theres any easier way of actually creating responsive views for mobile such as using applications like Phonegap or if anyone can give me tips on how to properly create responsive content for mobile.
Thanks in advance
EDIT:
The second picture is larger because it was as a screenshot from my mobile phone, the screen sizes aren't different.
I suggest watching the New Boston's Responsive Web Design Playlist:
He will teach you the important basic concept of a responsive design using percentage and also creating your own custom menu or button in a responsive mobile version(that makes it almost like a mobile app in a browser).
https://www.youtube.com/watch?v=yWgl3xXVlHI&list=PL6gx4Cwl9DGBaTsb1nse1UU48d_q7glGT
You should consider using bootstrap. It is a mobile first front-end framework for faster and easier web development
http://getbootstrap.com
#John Appleseed
use the Inspector
"Toggle device mode" or "Ctrl + Shift + M"
time you try your web site
and not just resize the page
I don't know your CSS but have a look at this
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I need to test an html file for mobile responsiveness, but all the resources I have found to do this need a URL or a localhost, is there any way to test responsiveness with just an html file?
Yes, simply open the .html file with Chrome or Firefox. These browsers have device mode.
You can change the screen size and see how it looks on mobile or tablet sized screens.
If you save your file .html you can open with firefox or chrome, but i suggest you to use firefox developer edition https://www.mozilla.org/it/firefox/developer/
If you use Firefox you can put in the menu -> development -> flexible display (ctrl+shift+m)
In Chrome (ctrl+maiusc+i + emulation)
In this page you can select the device to view.
You have a lot of options to test it, but each option has it's benefits.
You can minimize the browser!
You can use device mode from chrome,mozilla etc
You can find a lot of online responsive site testers for any resolution you want
In my opinion, the best way to test responsiveness is in Chrome. Right click on the page and inspect. Then there will be a button to turn on responsive testing. You can choose the device to see how your page will render on all kinds of devices. This is better than resizing your window because there are slight differences in how pages render on different tablets and phones.
There is nothing like using a real phone. As an example, px sizes differ between various phones and can cause troubles. The height of the URL bar comes into play in vertical flex scrolling when the display occupies 100%.
To do this kind of testing, you can use tunneling - products like https://serveo.net/ or ngrok.
I use http://www.responsinator.com
Very easy and complete, several types of mobile and table devices.
I have a live site at http://www.factormedia.co.za
When you inspect it to phone scale (around 350px width or so) it loads 3 icons in the menu, of a house,laptop and notepad.
However if you had to actually use a phone the images do not appear. So trying to figure out why it is not referencing my font library from fontastic.com.
Works fine in a preview but on the actual device itself.
It seems when you embed using the link they give you works when testing and using anything from a laptop to a desktop, once you scale down it starts to give issues to mobile. To solve this issue the easiest way was to manually download the icons I was using and use them as their own custom font by installing it as the site instructs.
This then solved the problem and it now shows on smaller devices
I've got a html5 website/webapp. I only want people to view this website/webapp from their mobile phone i.e. iphone, android, blackberry.
If they try to visit the website/webapp from their desktop browser, It should display an error message as the website/webapp is only meant for the mobile phone.
Is this possbile? any tips?
Thanks
There's no way to check for sure wether a site is on mobile or desktop. HTML is made to be device agnostic.
you can do browsersniffing BUT
user_agents are easily changed in several browsers
you need to make sure to keep your user agent->mobile/desktop mapping up to date
you could do mediaqueries and conditionally display a query that way, but with the large array of formfactors available today there's no clear line to draw that way either.
Both methods will be prone to misidentification.
Quite Frankly, I'm kinda puzzled why you would want to prevent people from accessing your site. Why do you care if someone accesses your site from a desktop instead of a mobile device?
A site designed for mobile will work on a desktop just fine (it's the other way around that might be problematic)
Grab the script for the language you prefer from here:
http://detectmobilebrowsers.com/
Works for me.
You could use media queries, on the page and check the device width on which the page is width. Say if the page is viewed on Desktop, You can show a Message that this App is compatible with Mobiles Devices only and Not Desktops. similarly this should apply for tablets as well and this message can be customized.
Are you using any serer side technologies (ASP.NET, PHP) to generate the page? If so, you can perform your logic on the server side and return different content (like your message) on the desktop requests.
This is usually done by reading the user-agent. Are you ok with a desktop user over-riding their user agent to simulate a mobile browser and viewing the mobile content?