1. Арга нь pure css буюу цэвэр css ээр шийдэж болох ба гарах асуудал нь эмбэд датанууд(embed) дээр тус бүрчлэн css бичих шаардлагатай. Мөн урт өргөн нь хатуугаар заагдсан объектыг (Жишээ нь видео, флаш) харуулахад асуудал тулгарна.
2. Хоёр дахь арга нь zoom буюу scale хийх javascript бичих. Үүнийг хэрэгжүүлэхийн тулд wrapper div объект нь хатуугаар заагдсан байх ёстой. Түүний доторх объектууд нь хатуугаар заагдсан ба дэлгэцийн хэмжээ өөрчлөгдөхөд урт өргөн өөрчлөгдөхгүй бидэнд харагдах хэсэг өөрчлөгдөнө гэсэн үг.
Миний хувьд хоёр дахь аргыг хэрэгжүүлсэн. Хэрэгжүүлэхийн тулд html ийнхээ бүтцийг тэр чигээр нь өөрчлөх шаардлагатай боллоо. Програм хангамжийн архитектур гэдэг үг толгой руу буух нь тэр.
jquery ашиглавал илүү амархан бичигдэх боловч ангулар жаваскрипт ашиглаж байгаа болохоор ямар нэгэн сан ашиглалгүй зөвхөн ангуларын дэлгэц өөрчлөгдөх эвэнтэд бичлээ.
javascript хэсэг
app.directive('resize', ['$window', function($window) { return { link: function(scope, elem, attrs) { scope.onResize = function() { var page = document.getElementById('pages'); var wWidth = $window.innerWidth; var pWidth = page.offsetWidth; var wHeight = $window.innerHeight; var pHeight = page.offsetHeight; if((pHeight/sHeight) > (pWidth/sWidth)) var m = sHeight / pHeight; else var m = sWidth / pWidth; var cols = document.getElementsByClassName('page'); for(i=0; i < cols.length="" angular.element="" bind="" cols="" function="" i="" m="" moz-transform="" pre="" resize="" scale="" scope.onresize="" style.zoom="m;" window="">} } scope.onResize(); angular.element($window).bind('resize', function() { scope.onResize(); }) } } }])
css хэсэг
.wrapper { margin: auto; width: 960px; height: 720px; }
Ашиглахдаа