So I have a web application that is not really meant for mobile but in case someone wants to access the app with mobile I'd like to minify the website like this:
from this:
to this:
so the user can zoom in on mobile.
How could i do something like this?
add below tag inside your head tag:
<meta name="viewport" content="width=device-width, initial-scale=0.1,minimum-scale=0.1">
(you can adjust "0.1" value to get best performance)
Related
I am writing a Smalltalk Seaside app where the resulting HTML pages will be viewed on a laptop/an iPad and/or an iPhone. The size of a standard submit or cancel button is fine on the laptop but way to small on the tablet or the phone. How do I change the size? I have the required style sheets for each type of viewer.
I have little experience in style sheets in Seaside so I have had difficulty getting anywhere with this.
I guess that I need to set a class and a size but not sure how to do this.
I don't know which style sheet you are using, but assuming is one of the kind of Bootstrap or Material Design Lite try adding this to your root component on the instance side:
updateRoot: anHtmlRoot
super updateRoot: anHtmlRoot.
anHtmlRoot meta
name: 'viewport';
content: 'width=device-width, initial-scale=1.0'
This will add the correspoding <meta> tag to the <head> element in your page, producing the following HTML output:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This will indicate the browser how to scale the contents.
For additional info, see this question: What is initial scale, user-scalable, minimum-scale, maximum-scale attribute in meta tag?
I am relative new, have built some static web pages but not an expert. I apologize if this has been answered else where, I am not sure what the error I am encountering would be called and have tried to search for an answer already and have not been successful. Please point me to another answer if an answer to this already exists.
For the project, I am building a static website for a school project and noticed that the html/css pages are displaying at different sizes (almost seems as if there was zoom effect). After looking at the code through the inspector I noticed that on the index.html page displays with a width of: 1236px and the other pages display with width of: 1350px in the same view port. Not sure how to to resolve this. Below is the link to the code on github. Again apologies if there is a better way to upload the code here, this is my first post on this forum.
https://github.com/teoherman/repice-site
Thanks in advance,
The issue is the fifth line in your index.html, or rather the lack thereof on your other pages. It is a good idea to always have a meta tag indicating viewport information.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Add this line into the head of your other pages. Note that you may want to keep most meta-tags in your <head> identical over different pages of one website. Most notably, these three:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
When I started I use Bootstrap for most of my school project. It help displaying pages in different screen sizes and there are many sample codes that you could use. Hope this might help you.
https://i.stack.imgur.com/9pEp0.png
I don't know what's the name, but why i always get this style everytime i access http://forumesia.com
But the style is ok if i access it in desktop. Only in my mobile phone i got crop little part of the website, how to fix this?
I already using bootstrap css but it still croping like that, any suggestion?
This is usually because the device doesn't know to scale the website to the device width.
You should make sure that <meta name="viewport" content="width=device-width, initial-scale=1"> is added in the head section of your HTML
link: http://www.kelvinhanssen.nl/projecten/marktmix_responsive/html/bedrijven_responsive.html
I made my first responsive webpage, and it doesn't act the way I want.
When I test it in this app: http://www.studiopress.com/responsive/
My website does what it's supposed to do.
But when you display it on your phone it look like it's been zoomed out
I can't attach any images because my reputation isn't high enough.
Any suggestions?
Add <meta name="viewport" content="width=device-width"> to your header.
This will make it so that the phone does not 'exaggerate' its actual width when rendering the page, which is how they typically get web pages to look decent.
I had this problem when I was doing my first website, it makes it look like its a desktop webpage, even though you have it set to look on a mobile webpage.
Just add this to your head part of your website, and it should work.
<meta name="viewport" content="width=device-width">
Let me know if it works.
I've got a site that isn't mobile enabled, but as part of a campaign, we are going to be sending out a QR code that contains a voucher to link through to a "hidden" page on this site. Of course as users are going to be accessing this page from a mobile phone, this page needs to be mobile enabled.
My question is, how do I go about doing this?
I know that you need a separate mobile style sheet but I've never done this before. Is this the best approach? I only have access to the front end of the site, so is there anything that needs to be done on the back end?
Thanks in advance and apologies if this seems a bit vague.
You need to have this in your <head> in order to make it jump to a mobile layout.
...
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=devide-width, initial-scale=1.0" />
<title> ... </title>
...
<link href="/stylesheets/mobile.css" media="only screen and (max-width: 767px)" rel="stylesheet" type="text/css" />
Then design the site for mobile using the mobile.css stylehsheet and it will be picked up automatically by the media query.
Hope this helps.
My question is, how do I go about doing this?
If you want to use the same page for regular size displays and mobile size displays, then look at media queries so you can do adaptive design (for which mediaqueri.es has some examples.
Whether or not you want to adapt to display size, the only other major factor is testing. Make sure you test on a range of devices and browsers.
You can just fit page to mobile phone screen. For example, page width is maximum 480px, avoid too big pictures, do not use java scripts etc.
you are correct in that you should start with a mobile.css. You should also use a mobile.js, as most heavy javascript will not be needed, and you want to keep the number of requests down and file sizes small.
I would suggest having something on the back-end though, which prevents the regular .css and .js files from loading, possibly based on the user-agent (the best method for this is a whole other topic). Otherwise, you would have to overwrite every style in the original .css file, which is way too much info to feed to a mobile device.
That would be the approach if you wanted to make a mobile version of the whole site.
since you mentioned only one page, you will just need to make a simple .css file and a (simple) page which fills the entire screen of the mobile device, using something like this:
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" />
once again, be sure not to load unnecessary .css and .js files