Khách hàng của tôi yêu cầu tôi giảm kích thước trang web hiện tại cho trình duyệt trên máy tính để bàn xuống 30%.Thẻ meta chế độ xem cho trình duyệt trên máy tính để bàn?
có thẻ css hoặc meta để thực hiện như thẻ meta chế độ xem trên trình duyệt dành cho thiết bị di động không?
Bạn có thể xem css screenmedia type.
Đó là:
chủ yếu dành cho màn hình máy tính màu sắc.
Bạn có thể sử dụng nó theo cách này:
@media screen {
body { font-size: 70% }
}
Ngoài ra còn có một loại handheld truyền thông, chủ yếu là:
Dành cho các thiết bị cầm tay (màn hình thường nhỏ, băng thông hạn chế).
Tuy nhiên, bạn sẽ cần phải kiểm tra các thiết bị và máy tính để bàn khác nhau mà khách hàng đang tập trung để xác định cách sử dụng các loại phương tiện này sẽ ảnh hưởng đến trải nghiệm người dùng.
Hmmm ... Tôi biết đây là một câu hỏi cũ, nhưng có một cách tốt hơn MUCH để thực hiện việc này: sử dụng chức năng chuyển đổi CSS scale() trên thẻ <html> để chia tỷ lệ mọi thứ bên trong. Kiểm tra jsFiddle này: http://jsfiddle.net/mike_marcacci/6fMnH/
Sự kỳ diệu là tất cả ở đây:
html {
transform: scale(.5);
-webkit-transform: scale(.5);
-moz-transform: scale(.5);
-ms-transform: scale(.5);
-o-transform: scale(.5);
width: 200%;
height: 200%;
margin: -50% -50%;
}
Điều này thực sự trả lời câu hỏi. Các câu trả lời khác chủ yếu chỉ ra rằng đây có thể không phải là cách tốt nhất để giải quyết vấn đề. – Kokodoko
Odes là đúng.
@media screen {
body { font-size: 70% }
}
Nhưng để thực hiện điều này thực sự hiệu quả, bạn phải sử dụng ems thay vì px ở mọi nơi. Điều đó đi cho lề và padding cũng như chiều rộng và chiều cao của tất cả các yếu tố.
Cách tốt nhất để làm điều này là sử dụng SASS. Chỉ cần tạo ra chức năng sass của riêng bạn để chuyển đổi các phép đo px của bạn thành ems khi đang bay. Một cái gì đó như thế này sẽ làm:
@function em($px, $context: 16, $basesize: 16) {
@return (($px/$basesize)/($context/16))+em;
}
nào sau đó được sử dụng trong CSS của bạn như sau:
div { font-size:em(12); width: em(200,12); }
Vì vậy, nếu kích thước font nội dung đã được thiết lập đến 100%, sau đó kích thước phông chữ sẽ tương đương đến 12px và chiều rộng của div sẽ rộng 200px.
Đây mã cho quy mô tỷ lệ và vị trí, wnen sử dụng "transform: scale"
CSS
html,body
{
width: 100%;
height: 100%;
margin:0;
padding:0;
}
html
{
position:absolute;
}
JS
var scale = 1;
$('html').css('transform','scale('+scale+')');
var windowWidth = $(window).width();
$('body').append(windowWidth);
$('body').append(' ' + windowWidth*scale);
//$('html').width(windowWidth*scale);
var width = (100*(1/scale));
var left = -(width*(1-scale))/2;
var height = (100*(1/scale));
var top = -(height*(1-scale))/2;
$('html').css('top', top+'%');
$('html').css('left', left+'%');
$('html').width(width+'%');
$('html').height(height+'%');
Bạn có thể bật thẻ meta viewport trên desktop với JS .Trước tiên, bạn nên lấy các thiết lập (chiều rộng) từ thẻ meta:
var viewportcontent = $("#myviewport").attr('content');
var viewportcontents = viewportcontent.split(",");
//if it starts with 'width='
for (var i = 0; i < viewportcontents.length; i++) {
if(viewportcontents[i].lastIndexOf('width=', 0) === 0) {
var wspec = viewportcontents[i].substring(6);
}
}
Sau đó, bạn cần một chút JS và các giải pháp của Mike để có được giải pháp làm việc này: http://codepen.io/anon/pen/GqoeYJ. Lưu ý rằng ví dụ này buộc chiều rộng là 1200 pixel, nhưng initial-scale: 0.7 có thể được triển khai theo cách tương tự.
Bạn đang tìm kiếm thuộc tính CSS 'thu phóng'. Được mô tả ở đây, http://stackoverflow.com/a/1156526/368691. – Gajus
Bạn có thể bật thẻ meta viewport (chiều rộng) trên máy tính để bàn bằng giải pháp JS này: http://stackoverflow.com/questions/37762579/get-meta-viewport-tag-to-work-on-desktop – JoostS