I'm trying to get my html web page to optimize to mobile devices. I have have tried a couple of bootstraps but it doesn't seem to be showing up properly. If anyone could help and assist I would truly appreciate it!!
Here's my HTML:
<header <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1.0">>
I expect the web page to be functional in a mobile setting.
You only have to implement Bootstrap responsive design
In the body of the page
For more advance stuff you can use css media queries
There are a number of problems with your code; firstly, the meta tags should be in the document <head> - not the <header>. Secondly, you have an HTML tag within another HTML tag's brackets, which is incorrect - you should only have tag names and attributed content within HTML brackets.
A correct structure of a document is more like this:
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1.0">
</head>
<body>
<main>
<header>
<h1>I am a heading</h1>
</header>
<p>I am some paragraph content</p>
</main>
</body>
</html>
Note how the meta information is separate from the document body, which houses the main content for the document.
Related
Like the title says, when I open my html file, it looks weirdly zoomed in. I checked the browser setting and its at 100% zoom. But what is even weirder, when I zoom out to 90% and then zoom in again to 100%, the webpage looks like how I intended it to look like.
I am very new to web development. Any clue as to what might be causing this issue?s
Edited to make question clearer:
This is what I have in my head tag.
I only use css, no scss or anything like that. I write code in visual studio.
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<!-- Personal CSS -->
<link rel="stylesheet" href="homepage_style.css">
<!-- Google Font "Karla" -->
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Karla">
<!-- Font Awesome Library -->
<script src="https://kit.fontawesome.com/f4b0af8bdd.js" crossorigin="anonymous"></script>
<title>My Portfolio</title>
I have tested your code, and it works well for me. So by the look of it, it should be the <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes"> line.
This line makes your page adapt to the user's screen resolution and scale. As we may have different screen resolutions, or simply the body I used to test ( a simple Lorem Ipsum ) could be so much different than yours, it didn't gave me that issue.
As I don't know the contents of your website, i will recommend you to remove the shrink-to-fit=yes as it should be what it is causing this.
That may affect other contents, so maybe you could use some Bootstrap ( you may already be using it ) to readjust some parts of the page if they get misconfigured.
How can I achieve pinch-zoom functionality on a mobile device at a local level (i.e. not the whole page) without needing to use Javascript? So far I can pinch-zoom the whole page through the use of the META viewport tag.
I have looked at CSS touch-action: pinch-zoom but bizarrely it doesn't do what its name suggests at all but apparently serves solely as a modified to other actions which have nothing to do with zooming. However, this page talks about how touch-action is supposed to work to allow native pinch zoom capability in the browser itself, which suggests that it should somehow be possible.
I have already tried to do this with IFRAMEs, but have apparently not hit on the right attributes needed to make it work:
pztest1.html
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pinch-Zoom Test IFRAME contents</title>
</head>
<body>
<H1>This is a test</H1>
<p>Test, test, test.</p>
</body>
</html>
This page by itself pinch-zooms, but only the entire page. So I put the contents in an IFRAME in another page:
pztest2.html
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Pinch-Zoom Test</title>
</head>
<body>
<h1>IFRAME test</h1>
<iframe src="pztest.html" height="640" width="480">
</iframe>
</body>
</html>
I am unable to pinch zoom at all in pztest2.html, neither in the body (which is expected) or in the IFRAME itself. If I remove the meta tag from pztest2.html, then I can zoom the body of pztest.html and the iframe with it, but I am unable to just zoom the IFRAME itself, which is the goal.
I am currently at a dead end on one of the projects I am working on.
I'm working on the translation of an application in Xamarin Ios, at the moment
the entire application can be translated and the language of the application can be changed directly via the app.
But this application also has Tutorials pages that explain in a few words what is the purpose of this feature.
These pages are in html and have a relatively simplistic content that looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Tutorial 1</title>
<link rel="stylesheet" href="style.css" type="text/css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="content-block">
<p>Use this page to add a new friend</p>
<p>It could be a good idea to give him a pseudo</p>
</div>
</body>
</html>
These pages should be translated on the fly when the user
decides to change the language of the application.
Currently the entire application could be translated into several languages except these html pages, simply because I have no idea what's the best way to do it.
I didn't find any information or documentation about this (I'm pretty sure that's because I'm using Xamarin Ios).
I am looking for a way to fill my html file with the contents of my resx files in which I would put the content html pages.
1 - I will have to save Html tags in my resx files if I decide to write <strong> this word </ strong>, which does not seem to me very practical and will oblige me to record every sentence and / or word that stands between specific tag ?
2 - How can I do this binding between my html file and my resx file? To get something like this
<!DOCTYPE html>
<html>
<head>
<title>Tutorial 1</title>
<link rel="stylesheet" href="style.css" type="text/css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="content-block">
<p> [contentFromMyResxFile] </p>
<p> [AnotherContentFromMyResxFile] </p>
</div>
</body>
</html>
content being loaded directly from my resx file and so could adapt to the language of the application.
After a few days of searching and trying to solve, got nowhere.
CKEditor 4.7.0 is stripping the content between the <title></title> tags. I need CKEDitor to leave the title content alone no matter how / where the title tag is used.
I have tried:
allowedContent: true,
extraAllowedContent : 'title',
extraAllowedContent: 'title[*]',
config.allowedContent = true; (in config.js)
CKEDITOR.dtd.$removeEmpty['title'] = false; (in config.js)
No luck with above. Then tried suggestion here ckeditor deteles page <title></title> title which works, but I end up with:
<!DOCTYPE html>
<html>
<head>
<title>OK Title</title>
</head>
<body> </body>
</html>
<p><br />
<title></title>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Web template presented with pure css."><meta name="keywords" content="css template"></p>
<link href="style.css" rel="stylesheet" />
<link href="red.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" /><!-- Header -->
<header class="w3-container w3-theme w3-padding" id="myHeader">
<div class="w3-center">
<h4>BEAUTIFUL RESPONSIVE WEB SITES</h4>
What I am doing is pasting into CKEditor an example CSS templates from https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_black&stacked=h
I understand this is not the way standard HTML should be displayed (not to spec), but I need to prevent CKEditor from modifying the title tag no matter, just ignore it and let me use it wherever:) This is just a simple project for classroom where no one sees source of page and I need title tag to show in browser tab when I project page on whiteboard for students.
UPDATE: did discover if I save with the source in view, CKEditor does not modify the title tag. Works this way but not when in visual mode which like to have:)
After what seemed like endless searches found some info on a drupal forum. Had so many links open lost track of exact site where obtained the info, sorry.
Solved the problem by adding the following to my config.js in CKEditor 4.7.0:
config.allowedContent = true;
config.protectedSource.push(/<title>[\s\S]*?<\/title>/gi); // allow content between <title></title>
Hope this will help someone else:)
I have a HTML/CSS code, and you can see it in this link
<div id="geral">
<div id="topo">
</div>
<div id="meioPage">
<div id="Menu_B">
</div>
<div id="Feed">
</div>
<div id="Menu_C">
</div>
</div>
</div>
The problem with this code is that it was made to take over the entire screen (responsive design) and its minimum size is 800x600 and its maximum size is 4k (more than that he did not make it a responsive design)
In a strange way the code works perfectly without the HTML tags, now I added these tags in my code:
<!DOCTYPE HTML>
<html>
<head>
<title>My Web Page</title>
<!--<meta http-equiv="X-Frame-Options" content="deny">-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
//Here I put the other code up
</body>
</html>
And the responsive design stopped working, and it no longer occupies the entire screen.
An example is the page the link sent above, JSFddle site automatically adds the HTML tags, but if you test this code without tags will see the responsive design come back to work, how can I solve this problem? there is some code to be placed in the HTML tags?
add meta viewport tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
when making responsive website you must put this in you head tags so the browser knows it is responsive, same for mobile devices.